我有这个简单的聚合物自定义元素:
<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/