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

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>

fiddle

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

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

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