css - 如何使用:hover，:active状态来样式化纸卡

聚合物元素为网页添加了一些很棒的材料设计。使用聚合物时，我无法在纸卡元素中添加:hover或:focus或此类选择器。

<style is="custom-style">
    paper-card{
        min-width: 33vw;

        --paper-card: {
             background-color: transparent;
         };

        --paper-card-header: {
             background-color: rgba(255, 255, 255, 1);
         }

        --paper-card-content: {
             background-color: rgba(255, 255, 255, 0.5);
         };
    }

    paper-card:hover{
        --paper-card-content: {
            background-color: rgba(255, 255, 255, 1);
         };
    }
</style>

上面的:hover选择无效。
Check this plunker

还有其他聚合物元素，例如纸按钮，它们的:hover状态可以正常工作。是否有其他合适的方法将:selectors应用于聚合物mixins？

如何进行:hover选择？有没有解决此问题的方法？ (如果仅在没有JS的CSS中会更好)

最佳答案

例如，您可以这样做

--paper-card:hover {
         background-color: transparent;
     };

要么

--paper-card: {
         background-color: transparent;
         transition: color 2s;
     };
paper-card:hover {
    color: red;
}

关于css - 如何使用:hover，:active状态来样式化纸卡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33311106/