当鼠标悬停一个Div时,它会使用CSS更改页面上另一个Div的类吗?

时间:2014-04-12 18:18:40

标签: javascript jquery css html

我有一个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>

谢谢。

5 个答案:

答案 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}