Question

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

@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中的元素属性

1 个答案: