Show a div when hover - PLEASE HELP :( :( -

HTML-CSS
1

Hi ! I want to show different div when you hover the links in my menu. But to reveal the menu, you must hover a picture.

As you can see, i can make the menu appearing by hovering the picture, but impossible to show a picture or a div when you over a link in the menu..

Im trying to solved this for two entire days, please helps :frowning: :frowning:

here, this just dont work for a reason
.games:hover .art-screen-1 {opacity: 100}

<meta charset="utf-8">
<style>
 /* Dropdown Button */
.button-photoshop {
	z-index: 99;
	position: fixed;
	top: 469px;
	left: 222px;
	opacity: 10%;
}
.art-screen-1 {
	z-index: 9;
	position: fixed;
	top: 155px;
	left: 81px;
	opacity: 10%;

}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;	
	z-index: 99;
	position: fixed;
	top: 469px;
	left: 222px;
}

.hide {
  display: none;
} 

.dropdown-content:hover + .hide {
	display: block;
	opacity: 100;
}
	
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	transform: rotate(-20deg);
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 99;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Show the button*/
.dropdown:hover .button-photoshop  {opacity: 100} 
	
.games:hover .art-screen-1  {opacity: 100} 

</style>

<img class="art-screen-1" src="https://slaizen.neocities.org/desktop/screen-1.png" width="129" height="94" alt=""/>

<img class="button-photoshop" src="https://slaizen.neocities.org/desktop/button-photoshop.png" width="129" height="94" alt=""/>

<div class="dropdown">
	<img class="button-photoshop" src="https://slaizen.neocities.org/desktop/button-photoshop.png" width="129" height="94" alt=""/>
	
  <div class="dropdown-content">
	  
	Downloadable Contents
<a class="games" href="/h13-my-games" target="_parent">My Games</a>
<a>Printables Movie Replica</a>
<a href="/h19-ressources-eng" target="_parent">Rpg Maker Ressources</a>
<a href="/h43-icons-wallpapers" target="_parent">Icons & Wallpapers</a>
<a href="/h33-minecraft-eng" target="_parent">Minecraft</a>
  </div>
</div>
2

It should tenicaly work the same with a div than with the img. But there is a problem with using the hover. If you hover over the links and then go to the divs you don’t hover over the links anymore and the divs hide again. You need th make the links bigger or use an other approach. It would be simpler and would work for sure too use the display: none to hide the divs and to show them display:block or inline-block. But its an great idea!

3

Not entirely sure what you are trying to do, but you can’t select .art-screen-1 using a descendant selector because it isn’t a descendant of .games. You could use a :has() selector.

body:has(.games:hover) .art-screen-1 {
  opacity: 100;
}
1 Like
4

Omg that was it ! Thank you so much ! I can now finish my page !

1 Like