Question

我试图在导航列表项上创建一个效果：当鼠标悬停在列表项锚标记上（或甚至处于活动状态）时，<span>中的图像应替换为彩色图像的版本。必须一起更改文本的颜色和图标的颜色。

我正在使用的代码如下，但这不起作用。看到这里的区别：
必填结果：https://imgur.com/a/wKzwd
实际结果：https://imgur.com/a/QzWwf

nav ul li a:hover,
.active {
  color: #3B94D9;
}

nav ul li:hover {
  border-bottom: 2px color #3B94D9;
}

span {
  margin-right: 4px;
  margin-top: 10px;
}

span#home {
  width: 20px;
  height: 18px;
  background: url('../img/home.png') no-repeat;
  display: inline-block;
  vertical-align: bottom
}

span#home:hover {
  background: url('../img/home-hover.png') no-repeat;
}

span#notif {
  width: 20px;
  height: 18px;
  background: url('../img/bell.png') no-repeat;
  display: inline-block;
  vertical-align: bottom
}

span#notif:hover {
  background: url('../img/bell-hover.png') no-repeat;
}

span#msg {
  width: 20px;
  height: 18px;
  background: url('../img/messages.png') no-repeat;
  display: inline-block;
  vertical-align: bottom
}

span#msg:hover {
  background: url('../img/messages-hover.png') no-repeat;
}

<nav>
  <ul>
    <li><a href="#" class="active"><span id="home"></span> Home</a></li>
    <li><a href="#"><span id="notif"></span>Notifications</a></li>
    <li><a href="#"><span id="msg"></span>Messages</a></li>
  </ul>
</nav>

Answer 1

你很接近，但是在你的CSS中，只有在直接悬停时才会定位跨度。当包含<a>时，您需要将其定位。

所以不要使用：

span#home:hover {
  background: url('../img/home-hover.png') no-repeat;
}

当容器a元素处于悬停状态时，使用此目标来定位范围：

a:hover span#home {
  background: url('../img/home-hover.png') no-repeat;
}

您也可以通过这种方式定位.active课程，即a.active span#home

工作代码：
（注意我添加了一种块颜色代替图标，因为我们没有图像在这里显示）

nav ul li a:hover,
.active {
  color: #3B94D9;
}

nav ul li:hover {
  border-bottom: 2px color #3B94D9;
}

span {
  margin-right: 4px;
  margin-top: 10px;
   }

span#home {
  width: 20px;
  height: 18px;
  background: url('../img/home.png') no-repeat;
  display: inline-block;
  vertical-align: bottom;
}

a.active span#home,
a:hover span#home {
  background: url('../img/home-hover.png') no-repeat;
}

span#notif {
  width: 20px;
  height: 18px;
  background: url('../img/bell.png') no-repeat;
  display: inline-block;
  vertical-align: bottom
}

a.active span#notif,
a:hover span#notif {
  background: url('../img/bell-hover.png') no-repeat;
}

span#msg {
  width: 20px;
  height: 18px;
  background: url('../img/messages.png') no-repeat;
  display: inline-block;
  vertical-align: bottom
}

a.active span#msg,
a:hover span#msg {
  background: url('../img/messages-hover.png') no-repeat;
}

/* added for TESTING ONLY as your images are not visible in the snippet */
span#home, span#notif, span#msg{
  background-color:#eee;
  height: 20px;
  width:20px;
}
a.active span#home, a.active span#notif, a.active span#msg,
a:hover span#home, a:hover span#notif, a:hover span#msg{
  background-color:#3B94D9;
}

<nav>
  <ul>
    <li><a href="#" class="active"><span id="home"></span> Home</a></li>
    <li><a href="#"><span id="notif"></span>Notifications</a></li>
    <li><a href="#"><span id="msg"></span>Messages</a></li>
  </ul>
</nav>

图标悬停不会与列表项锚点 - HTML一起悬停

1 个答案: