Milan Grujić Milan Grujić - 4 months ago 9
CSS Question

:hover on image shows other images

I am try to create

:hover
on images and make them show other images like menu to other pages. I have tried this code but when mouse is over sub-menu it opens instead to open just over main menu. I try to achieve something like this:

https://www.youtube.com/watch?v=Iya0oqKlBns

I used this code:



img{
width:150px;
}
body {
background:transparent;
}

.clearfix:after {
display:block;
clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:transparent;
}

.menu {
width:1000px;
margin:0px auto;
}

.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}

.menu a {
transition:all linear 0.15s;
color:transparent;
}

.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:transparent;
}

.menu .arrow {
font-size:11px;
line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}

.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:transparent;
}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}

.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:110%;
z-index:-1;
opacity:0;
transition:opacity linear 1.15s;

background:transparent;
}

.sub-menu li {
display:block;
font-size:16px;
}

.sub-menu li a {
padding:10px 30px;
display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
background:transparent;
}

.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:transparent;
}

.menu {
width:1000px;
margin:0px auto;
}

.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}

.menu a {
transition:all linear 0.15s;
color:transparent;
}

.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:transparent;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}

.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:transparent;
}
/*----- Bottom Level -----*/
.sub-menu {

padding:5px 0px;
position:absolute;
top:100%;
left:-60%;
z-index:-1;
opacity:0;
transition:opacity linear 1.15s;

background:transparent;
}
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu li {
display:block;
font-size:16px;
}

.sub-menu li a {
padding:10px 30px;
display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
background:transparent;
}

<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">

<li>
<a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>

<ul class="sub-menu">
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
</ul>
</li>

</ul>
</nav>
</div>

<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">

<li>
<a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/LIFESTYLE.png"><span class="arrow">&#9660;</span></a>

<ul class="sub-menu">
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/lepota.png"></a></li>
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/svadba.png"></a></li>
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/nocni-zivot.png"></a></li>
<li><a href="#"><img src="http://tronline.rs/wp-content/uploads/2016/07/MUZIKA.png"></a></li>
</ul>
</li>

</ul>
</nav>
</div>




Answer

Although you're currently using CSS to visually 'hide' your sub-menus, you're not writing in any styles that remove their ability to be :hovered by the mouse when inactive. Without this, they're simply still able to trigger the transition on their own without the main menu's icon.

In other words, something like the display or visibility properties removes the element's ability to trigger :hover events with the mouse cursor.

Here's a codepen for you to check out: http://codepen.io/anon/pen/zBRzZN

From W3C Spec:

Interpolation

Visiblity values are interpolable between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. If one of the values is visible, interpolated as a discrete step where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.

Further reading:
https://www.w3.org/TR/css3-transitions/#animtype-visibility
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
http://stackoverflow.com/a/4929336/6177319