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

Question

我有以下 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>

提前致谢。

Answer 1

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

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

div.onmouseover = function() {

    this.style.backgroundColor = 'grey';
 
};

div.onmouseout = function() {

    this.style.backgroundColor = 'white';
 
};

Answer 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>

Answer 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>

Answer 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>

Answer 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;
}

Answer 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>