仅当将鼠标悬停在文本上时才将图像的不透明度从0更改为1（而不是图像本身）

Question

基本上，当我将鼠标悬停在菜单中的文本上时，我想将不透明度从0更改为1。 这是工作。 但是，当用户将鼠标悬停在图像上时，它也在显示图像。 我想知道是否只有在用户将鼠标悬停在文本上时才可以更改不透明度。 我在这里做了一个jsfiddle： 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;
}

如您所见，如果用户将鼠标悬停在图像上方，则图像将显示出来。 谢谢！

Answer 1

只需从以下位置更改JSFiddle上的第14行：

#ul1:hover #li1 {

至：

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

这表示#li1不得悬停。

见我的JSFiddle 。