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

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

1 个答案: