在悬停时更改组件的背景颜色

Question

当我将鼠标悬停在面板的任何部分时，有没有办法可以更改整个面板的背景颜色？

我正在使用一个基本的 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>

我的 linkWrapper 组件：

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

Answer 1

最简单的解决方案使用 CSS

#my-panel:hover * {
    background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="my-panel" class="panel panel-primary" >
    <div id="panel-header" class="panel-heading" >text</div>
    <div id="panel-body" class="panel-body" >
        <p >text</p>
    </div>
</div>

上面的代码找到了我们正在寻找的面板并将伪元素:hover附加到它上面。然后它使用通用选择器* 查找其所有后代。

您也可以在 jQuery 中执行此操作。监听mouseover 和mouseout 事件，因为它们分别代表鼠标悬停在元素上和离开元素时。

在mouseover 事件期间，添加一个用于更改背景颜色的类。但是因为 Bootstrap 类已经有了样式，所以你需要使用 !important 声明。在mouseout 事件期间，只需删除此类即可。

$(document).ready(function() {
    	$(".panel").on("mouseover", function() {
            $(this).children().addClass("gold");
        }).on("mouseout", function() {
            $(this).children().removeClass("gold");
        });
    });

.gold { background: gold !important };

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my-panel" class="panel panel-primary" >
    <div id="panel-header" class="panel-heading" >text</div>
    <div id="panel-body" class="panel-body" >
        <p >text</p>
    </div>
</div>

JavaScript 解决方案类似于 jQuery 解决方案。创建变量以查找面板的正文和标题。您可以通过内联事件（即 onclick）或使用addEventListener 来侦听事件。

要添加或删除类，请分别使用classList.add 和classList.remove 方法。

var panel = document.getElementById("my-panel");
var panelHeader = document.getElementById("panel-header");
var panelBody = document.getElementById("panel-body");

panel.addEventListener("mouseover", function() {
    panelHeader.classList.add("gold");
    panelBody.classList.add("gold");
});

panel.addEventListener("mouseout", function() {
    panelHeader.classList.remove("gold");
    panelBody.classList.remove("gold");
});

.gold { background: gold !important };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div id="my-panel" class="panel panel-primary" >
    <div id="panel-header" class="panel-heading" >text</div>
    <div id="panel-body" class="panel-body" >
        <p >text</p>
    </div>
</div>

小提琴

CSS：http://jsfiddle.net/5v0osxce/

jQuery：http://jsfiddle.net/fehhemvo/

JavaScript：http://jsfiddle.net/t3mafrnr/1