如何在悬停的div中更改多个块？

2024-05-21 • 问答

我正在创建带有多个按钮的导航栏。这些按钮具有文本阴影，可在页面上显示的背景图像上突出显示，因为导航栏是透明的。当我将鼠标悬停在导航栏上时，导航栏具有背景色，并且我希望所有按钮都可以删除其文本阴影，因为它不吸引人。当我将鼠标悬停在一个按钮上时，该按钮是唯一一个没有文本阴影的按钮，而其他按钮仍具有该按钮。有什么办法吗？我很确定这应该很简单。

nav button {
  font-family: 'Didact Gothic',sans-serif;
  font-size: 170%;
  color: hsla(48,70%,63%,1);
  text-shadow: 0px 0px 5px black;
  cursor: pointer;
  background: none;
  border: none;
  margin: 0% 2% 0% 2%;
  /* To give space    between    the buttons */
  padding: .3% 2% .6% 2%;
  /* To give space    inside    the buttons */
  transition: 0.3s;
}

nav button:hover {
  background-color: hsla(9,57%,50%,1);
  color: hsla(48,83%,1);
  text-shadow: none;
}

<nav>
  <hr>
  <a href="Big Duck.html"><button>Home</button></a>
  <a href="Menu.html"><button>Menu</button></a>
  <a href="Photogallery.html"><button>Photogallery</button></a>
</nav>

首先，请删除a标记内的按钮，因为其中没有按钮。然后，您要做的就是这样：

nav a {
  font-family: 'Didact Gothic',sans-serif;
  font-size: 170%;
  color: hsla(48,70%,63%,1);
  text-shadow: 0px 0px 5px black;
  cursor: pointer;
  background: none;
  border: none;
  margin: 0% 2% 0% 2%;
  /* To give space    between    the buttons */
  padding: .3% 2% .6% 2%;
  /* To give space    inside    the buttons */
  transition: 0.3s;
}

nav:hover{ 
  background-color: hsla(9,57%,50%,1);
}
nav:hover a{ 
  text-shadow:none;
  background-color: hsla(9,1);
  color: hsla(48,83%,1);
}

<nav>
  <hr>
  <a href="Big Duck.html">Home</a>
  <a href="Menu.html">Menu</a>
  <a href="Photogallery.html">Photogallery</a>
</nav>

我相信您正在寻找这个套装：

nav button {
  font-family: 'Didact Gothic',1);
  text-shadow: 0px 0px 5px black;
  cursor: pointer;
  background: none;
  border: none;
  margin: 0% 2% 0% 2%;
  /* To give space    between    the buttons */
  padding: .3% 2% .6% 2%;
  /* To give space    inside    the buttons */
  transition: 0.3s;
}

nav:hover {
  background-color: hsla(9,1);
}

nav:hover button {
  background-color: hsla(9,1);
  text-shadow: none;
}

<nav>
  <hr>
  <a href="Big Duck.html"><button>Home</button></a>
  <a href="Menu.html"><button>Menu</button></a>
  <a href="Photogallery.html"><button>Photogallery</button></a>
</nav>

这是我尝试过的。

我已经删除了 a 标记内的 button 标记，以遵循最佳做法。

nav a {
  font-family: 'Didact Gothic',1);
  text-shadow: 0px 0px 5px black;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  margin: 0% 2% 0% 2%;
  /* To give space    between    the buttons */
  padding: .3% 2% .6% 2%;
  /* To give space    inside    the buttons */
  transition: 0.3s;
}

nav a:hover {
  background-color: hsla(9,1);
  text-shadow: none;
}

nav:hover a {
  text-shadow: none;
}

<nav>
  <a href="Big Duck.html">Home</a>
  <a href="Menu.html">Menu</a>
  <a href="Photogallery.html">Photogallery</a>
</nav>

如何在悬停的div中更改多个块？

web_css_web_css 回答：如何在悬停的div中更改多个块？

大家都在问