改变悬停组件的背景颜色

change background color of component on hover

本文关键字：背景 颜色 组件 悬停 改变      更新时间：2023-09-26

是否有一种方法可以改变整个面板的背景颜色，当我悬停在它的任何部分?

我正在使用一个基本的引导面板，使用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;
}

最简单的解决方案是使用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

相关文章：