我有这个简单的聚合物自定义元素:

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="list-row" attributes="header" >
    <template>
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
        <style>
            .wrapper
            {
                background-color: #DFF0D8;
                border: 1px solid #468847;
                width: 100%;
                height: 50px;
                line-height: 50px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            .wrapper :hover
            {
                cursor: pointer;
                background-color: #DFF0B8;
            }
            .wrapper :active
            {
                cursor: pointer;
                background-color: #DFF0B8;
            }
            .header
            {
                font-size: 20px;
                font-weight: 600;
                color: #468847;
            }
        </style>
        <div class="text-center wrapper">
            <span class="header">{{header}}</span>
        </div>
    </template>
    <script>
        Polymer('list-row',
        {
            header: "no header"
        });
    </script>
</polymer-element>


问题是悬停(和动作-用于测试)无法正常工作,为什么?

最佳答案

您在类上有语法错误。删除空间。

.wrapper:hover
 {
   cursor: pointer;
   background-color: #DFF0B8;
 }
 .wrapper:active
 {
   cursor: pointer;
   background-color: #DFF0B8;
 }

关于javascript - polymer 悬停CSS无效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24157415/

10-09 05:39
查看更多