javascript - polymer 悬停 css 不起作用

Question

我有这个简单的 polymer 自定义元素:

<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>

问题是悬停(和 Action - 用于测试)不起作用)，为什么？

Answer 1

你的类有语法错误。删除空格。

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