CODEWITHSUNDEEP
csshover
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

Change image opacity from 0 to 1 only when hovering over text (not on the image itself)

Basically I want to change the opacity from 0 to 1 when hovering over the text in a menu. It is working. But when the user is hovering over the image it is also showing the image. I wonder if there is a possibility to make the change in the opacity only when the user is hovering over the text. I've made a jsfiddle here: http://jsfiddle.net/8PvVk/ html:

<li id="ul1">

    <a href="http://erasmus-plus.ro">
        <img id="li1" src="http://erasmus-plus.ro/wp-content/themes/Claudiu/images/homepage.png"></img>

        Home

    </a>

</li>

css:

#ul1{
width:100px;
height:50px;
}

#ul1 a #li1{
   position: absolute;
   top: -30px;
   opacity: 0;
   margin-left: 30px;
   transition: all 1s linear;

}
#ul1:hover #li1 {
    opacity:1;
}

As you can see, if the user hovers over the image the image is showing up. Thanks!

Upvotes: 0

Views: 1367

Answers (1)

Robin
Robin

Reputation: 7895

Just change line 14 on your JSFiddle from:

#ul1:hover #li1 {

to:

#ul1:hover #li1:not(:hover) {

This says that #li1 must not be hovered.

See my JSFiddle.

Upvotes: 1

Related Questions