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;
}

ご覧のとおり、ユーザーが画像にカーソルを合わせると、画像が表示されます。ありがとう！