-2

I am making a website, and one of the features I would like it to have is that when a user hovers over a piece of text, more links appear like this:

     More (hovered on)
     Pizza (link)
     Burgers (link)
     Fries (link)

I was thinking that I could possibly use CSS to make the links white (the website has a white screen, no background) when not hovered on and black when hovered on, but what if someone clicked the link without realizing????

Thanks for any help!

DesperateCoder123
  • 1

3 Answers3

0

This is a possible solution assuming it's alright that the links are children of the div you want to hover over.

a {
  display: none;
}
p:hover a {
  display: inline-block;
}
<p>
  More
  <a href="#">Pizza</a>
  <a href="#">Burgers</a>
  <a href="#">Fries</a>
</p>
ssbrear
  • 138
  • 7
0

improving on ssbear's answer :

p {
display: flex;
flex-direction: column;
}

p a:first-of-type {
display: block;
}

a {
  display: none;
}

p:hover a {
  display: block;
}
<p>
  <a href="javascript:void(0);">More</a>
  <a href="#">Pizza</a>
  <a href="#">Burgers</a>
  <a href="#">Fries</a>
</p>
Binarynam
  • 144
  • 7
0

It's fine if you follow the above answers. But if you want to keep all list item tag then A simple javascript code is fine to do what you want.

let more = document.querySelector(".more");
let hide = document.querySelectorAll(".hide");
more.addEventListener("mouseenter", function() {
  for (i = 0; i < hide.length; i++) {
    hide[i].style.display = "block";
  }
});
.hide {
  display: none;
}
<ul>
  <li class="more"><a href="#"> More (hovered on)</a></li>

  <li class="hide"><a href="#">Pizza (link) </a></li>
  <li class="hide"><a href="#">Burgers (link)</a></li>
  <li class="hide"><a href="#">Fries (link)</a></li>
</ul>
Rounak Khan
  • 21
  • 5
  • As a general rule, if something can be fully accomplished with css, go with css (... well, especially in a traditionnal/frameworkless approach). – Binarynam Apr 17 '21 at 21:33