问答中心分类: CSS在 CSS 悬停事件中,我可以更改另一个 div 的样式吗? [复制]
0
匿名用户 提问 9分钟 前

这个问题在这里已经有了答案:

悬停一个元素时如何影响其他元素
(8 个回答)

关闭2年前.

当我将鼠标悬停在 id 为“a”的 div 或类上时,是否可以更改 id 为“b”的 div 或类的背景颜色?

Dan Dascalescu 回复 9分钟 前

使用 flexbox,您可以悬停其他元素,即使它们(似乎)被放置悬停在 DOM 中的那个。看我的纯 CSS 评级小部件.

3 Answers
0
Ben Rowe 回答 9分钟 前

这不能纯粹用 css 来完成。这是一种影响页面样式的行为。
使用 jquery,您可以快速实现问题中的行为:

$(function() {
  $('#a').hover(function() {
    $('#b').css('background-color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
    $('#b').css('background-color', '');
  });
});
David Thomas 回复 9分钟 前

是的,它可以,尽管只是在相对有限的情况下。但这当然可以用 CSS 来完成。

Ben Rowe 回复 9分钟 前

@David是的,仅在#b是#A的孩子或兄弟姐妹的有限情况下,等等。OP没有指定两者之间的关系,所以我认为情况并非如此。

Dan Dascalescu 回复 9分钟 前

使用 flexbox,您可以悬停其他元素,即使它们(似乎)被放置悬停在 DOM 中的那个。看我的纯 CSS 评级小部件.

moodboom 回复 9分钟 前

因包括鼠标悬停重置而受到冲击

0
kongr45gpen 回答 9分钟 前

没有 jQuery 的纯解决方案:
Javascript(头)

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

HTML(正文)

<div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">This is element a</div>
<div id="b">This is element b</div>

JSF中:http://jsfiddle.net/YShs2/

Dan Dascalescu 回复 9分钟 前

你甚至不需要鼠标悬停。看我的纯 CSS 评级小部件.

boydenhartog 回复 9分钟 前

@DanDascalescu 这就是我要找的,谢谢!

Adam 回复 9分钟 前

如何在 SCSS 上使用它?

jmrpink 回复 9分钟 前

这是这里唯一对我有用的解决方案。我什至可以稍微调整函数以允许目标元素也成为参数。非常感谢@kongr45gpen!

0
Curtis 回答 9分钟 前

以下示例基于 jQuery,但可以使用任何 JS 工具包甚至是普通的旧 JS 来实现

$(document).ready(function(){
     $("#a").mouseover(function(){
         $("#b").css("background-color", "red");
     });
});
David Thomas 回复 9分钟 前

css 不是 jquery(或者javascript)。

Madara's Ghost 回复 9分钟 前

jquery 是这里最合适的解决方案。

David Thomas 回复 9分钟 前

然后至少解释一下为什么 css 不合适,以及其他更合适的选项是什么。我认为仅仅将 jQuery 解决方案放入问题中并不是特别有用。

Curtis 回复 9分钟 前

jQuery 是 javascript 的扩展。用户从未明确要求没有 jQuery 解决方案。

Kumar 回复 9分钟 前

大多数人都知道 jQuery 是最合适的,尽管您也可以使用其他一些工具包

David Thomas 回复 9分钟 前

他也没有特别要求‘不——python' 解决方案,但考虑到问题被标记为只要'css',假设他想要一个 CSS 解决方案似乎是公平的。

Curtis 回复 9分钟 前

公平点@David Thomas,在发布此答案时,javascript 是一个标签,所以我认为 javascript 解决方案是可以接受的

David Thomas 回复 9分钟 前

啊,是的。我看到添加了该标签(尽管直到我发布了我的第一条评论之后我才看到它)。当我意识到它已在另一个编辑中被删除时,我正要收回我最初的评论(因为它不是添加javascript标签)。对不起,如果我看起来过分……呃……有争议的, 这不是敌意。另外,值得指出的是,否决票不是我的,我接受您的回答很有用,我认为这不是所要求的。

Curtis 回复 9分钟 前

如果我只用一个 CSS 标记来回答这个问题,我就不会发布 javascript/jquery 解决方案,因为用户可能会寻求使用或不使用 javascript 的解决方案。没问题,您似乎没有敌意,很高兴看到人们重新执行 jquery 不应该只是在不需要时用作快速解决方案!

Himanshu 回复 9分钟 前

感谢您也为 jQuery 添加解决方案。它帮助了我。

Tcll 回复 9分钟 前

虽然 JS/JQuery 解决方案很有帮助,但我也同意CSS:hoverJS.mouseover()是2个完全不同的东西。

Shawn J. Molloy 回复 9分钟 前

Javascript 的性能不如 CSS,因此 css 是专业项目中更理想的解决方案。