Question

我在这个网站上工作，我无法在鼠标悬停时更改菜单按钮。我目前有这个div我想要鼠标悬停：

<a href="/index.html"><div class="e" id="menu-button"><p id="menu-text">Home</p></div></a>

类e和ID绑定到此css：

#menu-button {
   background-color: azure;
     color: black;
    height: 3.5vw;
    width: 23%;
    margin-left: 2%;
    color: black;
    magin-top: 2%;
    float: left;

}

.e:hover {
    background-color: blue;
}

在'鼠标悬停'或'悬停'事件中，该按钮根本不会改变。提前谢谢！

Answer 1

按ID选择div元素比按类选择div元素更具体，因此正在覆盖.e:hover样式。只需将代码更改为

即可

#menu-button {
  background-color: azure;
  color: black;
  height: 3.5vw;
  width: 23%;
  margin-left: 2%;
  color: black;
  margin-top: 2%;
  float: left;
}

#menu-button:hover {
  background-color: blue;
}

Answer 2

background元素的.e被#menu-button元素覆盖。

使用id选择器。 id选择器优先于class选择器。因此，这将不允许类选择器覆盖属性。

#menu-button:hover {
    background: blue;
}

Demo

a {
  display: block;
}
#menu-button {
  background-color: azure;
  color: black;
  height: 3.5vw;
  width: 23%;
  margin-left: 2%;
  color: black;
  margin-top: 2%;
  float: left;
}
#menu-button:hover {
  background: blue;
}

<a href="/index.html">
  <div class="e" id="menu-button">
    <p id="menu-text">Home</p>
  </div>
</a>

Answer 3

请改用#menu-button:hover。这里的问题是Specificity of CSS。在这些情况下，ID具有更高的特异性，会覆盖类选择器:hover属性。

特异性值

#menu-button 100

.e 10

＆＃13;

#menu-button {
  background-color: azure;
  color: black;
  height: 3.5vw;
  width: 23%;
  margin-left: 2%;
  color: black;
  magin-top: 2%;
  float: left;
}
#menu-button:hover {
  background-color: blue;
}

＆＃13;

<a href="/index.html">
  <div class="e" id="menu-button">
    <p id="menu-text">Home</p>
  </div>
</a>

＆＃13;

Answer 4

你的css类悬停已被id的css覆盖。

＃菜单按钮

尝试在id上使用悬停效果

img src=specialization.avatar.url(:thumb) /

鼠标悬停在div上不会改变颜色

4 个答案: