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