Question

我正在一个网站上工作，并希望在文本类悬停时更改div的背景颜色。我有以下HTML

<ul class="action-list-three">
<li class="three.footer">
<a class="provider" href="#" target="_blank" style="text-decoration:none">TEXT</a><br />
</li>
</ul>

和以下CSS（想要更改此BG颜色）：

.action-list-three a.provider {
background: #71CDF1;
padding-top: 5px;color: white;
margin-left: 50px;
border-radius: 5px;
padding-bottom: 35px;
padding-left: 60px;
padding-right: 60px;
font-size: 20px;
border: rgb(30, 128, 167);
border-style: inset;
border-width: 2px;
font-size: 18px;
margin-left: 742px;
display: block;
z-index: 1;
position: absolute;}

我知道我可能会遗漏一些信息，所以可以直播查看： sandbox.petassure.com

感谢您的帮助

Answer 1

只需使用CSS中的:hover声明

即可

.provider:hover{
   background: red;
}

JS解决方案，非常简单的例子

DEMO http://jsfiddle.net/x8dSP/3423/

$(function () {
    $(".test").hover(function () {
        $("div").css("background-color", "red");
    }, function () {
        $("div").css("background-color", "white");
    });

    $("div").hover(function () {
        $(".test").css("background-color", "red");
    }, function () {
        $(".test").css("background-color", "white");
    });
});

Answer 2

我在这里编辑了它：

HTML：

<ul class="action-list-three">
<li class="three.footer">
<a class="provider" href="#" target="_blank" style="text-decoration:none">TEXT</a><br />
</li>
</ul>

CSS：

.action-list-three a.provider {
background-color: #71CDF1;
padding-top: 5px;color: white;
margin-left: 50px;
border-radius: 5px;
padding-bottom: 35px;
padding-left: 60px;
padding-right: 60px;
font-size: 20px;
border: rgb(30, 128, 167);
border-style: inset;
border-width: 2px;
font-size: 18px;
margin-left: 742px;
display: block;
z-index: 1;
position: absolute;}

.action-list-three a.provider:hover{
background-color: WHAT COLOR YOU WANT
}

只需改变“你想要的颜色”

当一个类悬停时改变div的背景，反之亦然

2 个答案: