仅当将鼠标悬停在文本上时（不在图像本身上），将图像不透明度从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。