css - 如何使用 :hover, 风格化纸卡:事件状态

Question

polymer 元素为网页添加了一些很酷的 Material 设计。在使用 polymer 时，我无法将 :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

存在其他 polymer 元素，如纸按钮，其中 :hover 状态正常工作。有没有其他正确的方法可以将 :selectors 应用于 polymer mixins？

如何进行 :hover 选择？这个问题有什么解决方法吗？ (如果只有 CSS 没有 JS 会更好)

Answer 1

例如你可以这样做

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

或

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