Polymer

Question

假设我有一个 paper-material 元素，我想增加 mouseover 上的 elevation 值。但是我不希望这种情况发生在较小的屏幕上，因此媒体查询如下：

@media (min-width: 1100px) {
  paper-material:hover {
    elevation: 2; /* This doesn't work */
  }
}

应该可以解决问题 - 但事实并非如此。 paper-material 本身没有做任何特别的事情：

<paper-material elevation="1">
  <p>I wish I could go up!</p>
</paper-material>

现在我可以使用 on-mouseover 值来（某种程度上）执行此操作。在这种情况下，我可以有两个事件处理程序来执行 moverover 和 mouseout.

<paper-material elevation="1" on-mouseover="elevateCard" on-mouseout="demoteCard">
  <p>I wish I could go up!</p>
</paper-material>

...

elevateCard: function(event) {
      event.srcElement.setAttribute('elevation', 2);
}
demoteCard: function(event) {
      event.srcElement.setAttribute('elevation', 1);
}

我对这种方法不太满意，因为它要求海拔高度在 script 标记中（我想这可以抽象掉，但那是另一个问题）而且更重要的是，它似乎CSS :hover 属性已经能够执行的许多额外代码。

Answer 1

您使用的元素的原生 api 无法做到这一点。您可以自己应用元素本身使用的 css 规则来解决它，例如：

  @media (min-width: 1100px) {
    paper-material:hover {
      @apply(--shadow-elevation-4dp);
    }
  }

（如果您导入了您已经导入的元素 /paper-styles/shadow.html，这是必需的）

但是，我没有立即发现您的解决方案有任何问题。您可以将 'levels' 作为元素的属性。

<paper-material data-next-elevation="2" elevation="1" on-mouseover="elevateCard" on-mouseout="demoteCard">

然后只需使用 elem.getAttribute('data-next-elevation') 并在需要时应用它。这样您就可以将元素的逻辑保存在一个地方。

Polymer - 在 CSS 中修改元素的属性

Polymer - Modify element's attribute in CSS

css

mouseevent

polymer-1.0