当鼠标悬停时更改组件的背景颜色

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>

我的链接包装组件：

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

- Bomber

---

为什么不使用CSS？ - Dominic

不确定如何将一个规则中的3个元素更改。 - Bomber

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

注：以上链接为代码演示链接。

- Richard Hamilton