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这样的事件：

＆＃13;

var div = document.getElementById('div_id');

div.onmouseover = function() {

    this.style.backgroundColor = 'grey';
 
};

div.onmouseout = function() {

    this.style.backgroundColor = 'white';
 
};

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这可以通过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 4

您可以使用CSS hover伪选择器：

HTML：

.custom-select > div {
    background: white;
}

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

CSS：

class xxx(models.Model):
    ....
    def __str__(self):  # __str__ for Python 3, __unicode__ for Python 2
        return self.name

Answer 5

由于这正是您所寻找的，我已更新了我的代码段，以包含解释每个部分所做工作的注释。

＆＃13;

/* 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 */
}

＆＃13;

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

＆＃13;

Answer 6

以下是一个使用示例：hover in css：

<强>被修改

使用first-child＆amp;最后一个孩子没有上课：

＆＃13;

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

＆＃13;

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

＆＃13;

以下是修改其他（MouseEvent）的样式的示例：

＆＃13;

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

＆＃13;

.custom-select>div:first-child {
    background-color: gray;
}

.custom-select>div:last-child {
    background-color: white;
}

＆＃13;

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

＆＃13;

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

6 个答案: