更改嵌套 div 内鼠标悬停时的图层颜色

Posted 2023-05-08

【中文标题】更改嵌套 div 内鼠标悬停时的图层颜色

【英文标题】：Change color of layers on mouseover inside a nested div

【发布时间】：2018-11-23 19:03:26

【问题描述】：

我有以下 html 代码，我正在尝试更改 div 标签的背景颜色，这样当我将鼠标悬停在文本上时，背景应该变成灰色，但是当我将鼠标移出标签，它应该变成白色。我正在尝试使用 css 来做到这一点，但我很难想出代码。这可能只使用css吗？谁能给我举个例子？

<div class="custom-select">
<div style="background-color: grey;">TEST 1</div>
<div style="background-color: white;">TEST 2</div>
</div>

提前致谢。

【问题讨论】：

为了让我们更好地帮助您，请更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果您可以让我们知道what you have tried so far 来解决您的问题，将会很有帮助。更多信息请参考how to ask good questions的帮助文章。

w3schools.com/cs-s-ref/sel_hover.asp

可能重复：[div 背景颜色，改变悬停状态](***.com/questions/676324/…)

div background color, to change onhover的可能重复

【参考方案1】：

您可以像这样使用onmouseover 和onmouseout 事件：

var div = document.getElementById('div_id');

div.onmouseover = function() 

    this.style.backgroundColor = 'grey';
 
;

div.onmouseout = function() 

    this.style.backgroundColor = 'white';
 
;

【讨论】：

我收到一条错误消息，指出 var div 为空。我错过了什么？感谢您的帮助。

好的。请为您的 div 指定一个 id，以便您可以获取 div 的 id

类似的东西 测试 1 测试 2

然后提供像这样的id var div1 = document.getElementById('1'); var div2 = document.getElementById('2');

【参考方案2】：

由于这是您要查找的内容，因此我更新了我的代码 sn-p 以包含 cmets 来解释每个部分的作用。

/* PART 1 - Set first child's background colorinside custom-select to grey*/
.custom-select div:first-child
 
  background-color:grey; 


/* PART 2 - if hovering over custom-select 'undo' the styling set to the first child by setting background-color to white */
.custom-select:hover div:first-child
  background-color: white;


/* PART 3 - Hover effect for divs inside custom-select */
.custom-select>div:hover
  background-color: grey !important;
  /* !important is used to override the styling in PART 2 */

<div class="custom-select">
  <div>TEST 1</div>
  <div>TEST 2</div>
</div>

【讨论】：

非常接近我的需要。但是在初始加载时，我需要将第一个 div 的背景颜色设置为灰色，所以我使用了下面的代码。然后，当您将鼠标移到每个标签上时，它的行为应该像您的代码一样。 .custom-select div:first-child background-color:grey;

谢谢 RyDog！这就是我一直在寻找的。​​span>

没问题，我添加了一些cmets来简要说明发生了什么。

【参考方案3】：

使用:hover 到 div 然后更改background-color

.custom-select .div1
background-color:grey;

.custom-select .div2
background-color:white;

.custom-select .div1:hover
background-color:white;

.custom-select .div2:hover
background-color:grey;

<div class="custom-select">
<div class="div1">TEST 1</div>
<div class="div2">TEST 2</div>
</div>

【参考方案4】：

这可以通过 css 完成。

.custom-select .first,
.custom-select .second 
  background: white;


.custom-select .first:hover 
  background: gray;


.custom-select .second:hover 
  background: gray;

<div class="custom-select">
  <div class="first">TEST 1</div>
  <div class="second">TEST 2</div>
</div>

【参考方案5】：

您可以使用 CSS 悬停伪选择器：

HTML：

<div class="custom-select">
    <div>TEST 1</div>
    <div>TEST 2</div>
</div>

CSS：

.custom-select > div 
    background: white;


.custom-select > div:hover 
    background: gray;

【讨论】：

感谢您的帮助，如果最初只有 TEST 1 div 是灰色的，然后当我将鼠标移到 TEXT2 后它会变为白色，那么 css 代码将如何变化？

【参考方案6】：

这是一个在 css 中使用 :hover 的示例：

已编辑

使用 first-child & last-child 做无类：

.custom-select>div:first-child 
    background-color: gray;


.custom-select>div:last-child 
    background-color: white;


.custom-select>div:first-child:hover 
    background-color: white;


.custom-select>div:last-child:hover 
    background-color: grey;

<div class="custom-select">
  <div>TEST 1</div>
  <div>TEST 2</div>
</div>

这里是一个修改对方样式的例子(MouseEvent)：

var custom_select = document.getElementsByClassName('custom-select')[0];

var first = custom_select.children[0];
var second = custom_select.children[1];

first.onmouseenter = function(event)
  second.style['background-color'] = 'gray';

first.onmouseout = function(event)
  second.style['background-color'] = 'white';

second.onmouseenter = function(event)
  first.style['background-color'] = 'white';

second.onmouseout = function(event)
  first.style['background-color'] = 'gray';

.custom-select>div:first-child 
    background-color: gray;


.custom-select>div:last-child 
    background-color: white;

<div class="custom-select">
  <div>TEST 1</div>
  <div>TEST 2</div>
</div>

【讨论】：

感谢您的帮助，但不幸的是，我无法将类放在嵌套的 div 标签内。

我修改了没有类的例子。

如果你有多个 div，你可以使用 :nth-child(x)

差不多了，我把你的代码改成了这个，但是当我悬停到最后一个 div 时，是否可以将第一个 div 的背景更改为白色？ .custom-select>div:first-child 背景颜色：灰色； .custom-select>div:last-child 背景色：白色； .custom-select>div:first-child:hover 背景颜色：白色； .custom-select>div:last-child:hover 背景色：灰色；

单纯使用css我觉得是不可能的。（如有错误请指正）。所以我建议使用javascript来做到这一点。