我有一个Div“red”,在mouseover上我希望它将页面上另一个Div“blue”的类更改为“green”。
这两个div包含在他们自己看到的不同div中,可以使用CSS完成吗?如果不是如何用jquery完成?
<div id="one">
<div id="red">red</div>
</div>
<div id="two">
<div id="three">
<div class="blue">blue</div>
</div>
</div>
谢谢。
答案 0 :(得分:2)
$('#red').hover(function() {
$('#blue').addClass('.whatever')
});
答案 1 :(得分:1)
试试这个
$('#red').on('mouseover', function() {
$('.blue').removeClass('blue').addClass("green");
});
答案 2 :(得分:0)
您必须使用Javascript执行此操作。当文档加载时,有一些代码在一个div上有一个悬停,然后更改另一个。
试试这个:
$("#red").hover(function() {
$("#blue").addClass("SOMECLASSHERE");
}
答案 3 :(得分:0)
无法用CSS完成,因为在CSS中没有办法将父级和兄弟姐妹横向扩展。但是,这在jQuery中是可行的。此外,在项目出现后命名类可能不是一个好主意 - 例如,如果您将.blue的背景或文本颜色更改为其他内容?它会失去意义和背景。
然而,有一种基于jQuery的解决方案是可行的(参见p roof-of-concept fiddle here)
$('#red').on('mouseover', function() {
$('.blue').removeClass('blue').addClass("green");
});
如果你想切换一个类,你应该使用它:
$('#red').on('mouseover', function() {
$('.blue').removeClass('blue').addClass("green");
}).on('mouseout', function() {
$('.green').removeClass('green').addClass('blue');
});
答案 4 :(得分:0)
我建议使用Javascript来执行此操作,您不能仅使用CSS更改DIV的类,但是,您可以在另一个div的悬停时将CSS更改应用于div,这可能会产生相同的效果但是它并不适用于所有浏览器。
#one:hover #two#three.blue {color: green}