在CSS的hover事件中，我可以改变另一个div的样式吗？

10 浏览
0 Comments

在CSS的hover事件中，我可以改变另一个div的样式吗？

当我将鼠标悬停在具有id为"a"的div或class上时，我能否使具有id为"b"的div或class的背景颜色发生变化？

0

3 答案

0 Comments

在CSS的hover事件中，我能改变另一个div的样式吗？

问题的出现原因：

这个问题的出现是因为在CSS中，hover事件只能直接针对当前元素进行样式改变，无法直接作用于其他元素。因此，需要通过其他方式来实现hover事件对其他元素样式的改变。

解决方法：

可以使用JavaScript来实现hover事件对其他元素样式的改变。以下是一个不使用jQuery的纯JavaScript解决方案：

JavaScript（头部）：

function chbg(color) {
    document.getElementById('b').style.backgroundColor = color;
}

HTML（主体）：

This is element a


This is element b

在上述代码中，我们定义了一个名为chbg的函数，它接受一个颜色参数，并将id为'b'的div元素的背景色设置为该颜色。然后，我们在'id为a'的div元素中使用onmouseover和onmouseout事件来调用chbg函数，从而实现hover事件对'id为b'的div元素样式的改变。

以上就是解决问题的方法，通过JavaScript来实现hover事件对其他元素样式的改变。在实际使用中，可以根据具体需求进行相应修改和扩展。希望对你有所帮助！

0
0 Comments

在CSS中无法纯粹地实现这个功能。这是一种会影响页面样式的行为。

使用jQuery，你可以快速实现你问题中的行为：

$(function() {
  $('#a').hover(function() {
    $('#b').css('background-color', 'yellow');
  }, function() {
    // 鼠标移出时，重置背景颜色
    $('#b').css('background-color', '');
  });
});

是的，可以，尽管只在相对有限的情况下。但是，这确实可以通过CSS来实现。

是的，只有在#b是#A的子元素或同级元素的有限情况下才可以实现。由于OP没有指定两者之间的关系，所以我假设这不是这种情况。

使用flexbox，即使它们（在DOM中）在被悬停元素之前被放置（看起来如此），你也可以悬停其他元素。请参阅我的[纯CSS评级小部件](http://stackoverflow.com/questions/4502633/32470900#32470900)。

为了包含鼠标移出重置而提升。

0
0 Comments

在CSS的hover事件中，我可以改变另一个div的样式吗？

是的，你可以这样做，但前提是在HTML中，div#b需要在div#a之后。

如果div#b紧跟在div#a后面，可以使用相邻兄弟选择器（+）：

#a:hover + #b {
    background: #ccc;
}

Div A


Div B

如果在div#a和div#b之间有其他元素，可以使用一般兄弟选择器（~）：

#a:hover ~ #b {
    background: #ccc;
}

Div A


random other elements


random other elements


random other elements


Div B

这两种选择器在所有现代浏览器和IE7+中都有效。

如果div#b是div#a的后代，你可以简单地使用div#a:hover div#b。

另外，你还可以使用纯CSS来实现这个效果，方法是将第二个元素在第一个元素之前定位。第一个div在标记中是第一个，但在第二个div的右侧或下方定位。它将起到前一个兄弟元素的作用。

需要注意的是，相邻兄弟选择器（+）在IE8及以下版本中不起作用。

如果有需要进一步解释的地方，请添加说明性文字。

原文链接: [stackoverflow.com](http://stackoverflow.com/posts/6910049/revisions)

0