Question

我正在构建一个网站，但在应用悬停时（CSS + HTML5），链接显示有问题。如何停止悬停以同时应用于同一行上的所有链接？就像我希望悬停只应用于指向的链接而不是所有的一次。链接位于导航栏上。请帮帮我。

以下是我的程序：

a:link {
  color: white;
  padding: 10px;
}

nav:hover {
  background-color: #ff3399;
}

<nav>
  <a href="/home/">HOME</a>
  <a href="/marchendise/">MARCHENDISE</a>
  <a href="/transportation/">TRANSPORTATION</a>
  <a href="/ciment/">CIMENT</a>
  <a href="/locations/">LOCATIONS</a>
  <a href="/laiterie/">LAITERIE</a>
  <a href="/contacts/">CONTACTS</a>
</nav>

Answer 1

您在悬停时将背景应用于nav元素，即nav:hover，而不是<a>。

只需使用a:hover

即可

a:link {
  color: #000;
  padding: 0 10px;
}

a:hover {
  color: #fff;
  background-color: #ff3399;
}

<nav>
  <a href="/home/">HOME</a>
  <a href="/marchendise/">MARCHENDISE</a>
  <a href="/transportation/">TRANSPORTATION</a>
  <a href="/ciment/">CIMENT</a>
  <a href="/locations/">LOCATIONS</a>
  <a href="/laiterie/">LAITERIE</a>
  <a href="/contacts/">CONTACTS</a>
</nav>

Answer 2

你必须是特殊的我建议您在css中了解有关选择器的更多信息：https://www.w3schools.com/cssref/css_selectors.asp

nav a:hover{
color:red
}

<nav> <a href="/home/">HOME</a> 
<a href="/marchendise/">MARCHENDISE</a>
<a href="/transportation/">TRANSPORTATION</a>
<a href="/ciment/">CIMENT</a> 
<a href="/locations/">LOCATIONS</a> 
<a href="/laiterie/">LAITERIE</a>
<a href="/contacts/">CONTACTS</a> 
</nav>

如何限制悬停不能同时应用于所有链接？

2 个答案: