How am I able to change multiple blocks in a div on hover?

Question

I'm creating a navigation bar with multiple buttons. The buttons have a text-shadow to stand out on a background image I have on my page, as the navigation bar is transparent. As I hover over the nav, the nav takes on a background color, and I'd like all of the buttons to remove its text-shadow as it's not eye appealing. As I hover on a button, that button is the only one without the text-shadow, while the other buttons still have it. Any solutions? I'm pretty sure this should be simple.

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, 70%, 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>

you cannot put a button inside an anchor tag: https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 — Pete, Nov 27 '19 at 15:37
I made you a snippet. It seems the snippet does what you describe. Can you elaborate on expected result? — mplungjan, Nov 27 '19 at 15:37

Armedin Kuka · Accepted Answer · 2019-11-27T15:48:23.737

Firstly, remove the buttons inside the a tag since you can't have buttons inside them. Then what you want to do is something like this:

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, 57%, 50%, 1);
  color: hsla(48, 70%, 83%, 1);
}

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

I would expect text-decoration: none; somewhere, but it does not work on hover — mplungjan, Nov 27 '19 at 15:58

score 0 · Answer 2 · edited Nov 27 '19 at 15:39

I believe you're looking for this set:

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:hover {
  background-color: hsla(9, 57%, 50%, 1);
}

nav:hover button {
  background-color: hsla(9, 57%, 50%, 1);
  color: hsla(48, 70%, 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>

score 0 · Answer 3 · edited Nov 27 '19 at 15:58

0

Here is what I have tried.

I have eliminated button tag inside a tag to follow best practice.

nav a {
  font-family: 'Didact Gothic', sans-serif;
  font-size: 170%;
  color: hsla(48, 70%, 63%, 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, 57%, 50%, 1);
  color: hsla(48, 70%, 83%, 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>

edited Nov 27 '19 at 15:58

mplungjan

169,008
28
173
236

answered Nov 27 '19 at 15:44

furydart

1

Hey @furydart, can you provide an explanation of what you did? It looks like what you have it right but having an explanation to go with the solution helps others learn rather than just copying and pasting code. – cjc Nov 27 '19 at 15:48
I have added following style to hide text shadow of entire nav bar. **nav:hover a {text-shadow: none;}** – furydart Nov 28 '19 at 16:07

How am I able to change multiple blocks in a div on hover?

3 Answers3