在嵌套 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

由于这是您要查找的内容，因此我更新了我的代码片段以包含解释每个部分功能的注释。

/* 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 的示例：

编辑

使用第一个孩子和最后一个孩子来做没有类：

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

下面是一个修改另一个(鼠标事件(样式的示例：

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>