html - 当类悬停时更改 div 的背景,反之亦然

标签 html css class background background-color

我在网站上工作,希望在将鼠标悬停在文本类上时更改 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

谢谢你的帮助

最佳答案

只需在 CSS 中使用 :hover 声明

.provider:hover{
   background: red;
}

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

演示 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");
    });
});

关于html - 当类悬停时更改 div 的背景,反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24127130/

相关文章:

java - 如何从不同的类和包访问对象?

html - 电话号码和屏幕阅读器

css - 如何使用 css 制作固定的 div 元素?

html - 大表情符号在 Chrome 和移动浏览器上被截断

javascript - :hover and :focus in javascript css object怎么写

class - Haskell 单体可折叠玫瑰树

c++ - 在 C++ 中创建不可变对象(immutable对象)的更好方法

html - 日期选择器 html5 标签在 Mozilla、IE 浏览器上不工作。但它只适用于 Chrome

javascript - Angularjs 下拉 OnChange 选定的文本和值

javascript - 初学者在将 JavaScript 链接到 case 语句时遇到问题?