当我悬停在面板的任何部分时,是否有一种方法可以更改整个面板的背景颜色?
我正在使用基本的boostrap面板,并使用bootstrap-react:
<LinkWrapper url={url}>
<Panel header="text" bsStyle="primary">
<p>text.</p>
</Panel>
</LinkWrapper>
生成以下标记:
<div class="panel panel-primary" >
<div class="panel-heading" >text</div>
<div class="panel-body">
<p>text</p>
</div>
</div>
我的链接包装组件:
var LinkWrapper = React.createClass({
getDefaultProps: function() {
return {
}
},
render: function() {
return (
<a href={this.props.url}>{this.props.children}</a>
)
}
});
module.exports = LinkWrapper;
我的CSS代码如下:
a.highlight:hover{
text-decoration:none;
color:white;
}
.highlight .panel-body:hover, .highlight .panel-heading:hover {
text-decoration:none;
background-color:$primary-color;
color:white;
border-color:$primary-color;
}
.highlight .panel-body p:hover {
text-decoration:none;
color:white;
}