CSS：ホバーオンのターゲットはクリックしていません

Question

私はスライダーを持っています。しかし、少し問題があります。 <li>のいずれかにカーソルを置いたときにスライダの画像を変更したいときにクリックしたときではなく、スライダの画像を変更したいと思います。

これは可能ですか？私はこれを見つけましたlink、しかし多分既にいくつかの新しいスタイルが利用可能ですか？

FIDDLE

Answer 1

あなたが使用する必要があります：ターゲットを？私のフィドルをチェックしてください。

.slide 
 
{ 
 
    position: absolute; 
 
    display: none; 
 
    left:0; 
 
} 
 
ul 
 
{ 
 
    padding-top: 50px; 
 
    list-style:none; 
 
} 
 
ul li 
 
{ 
 
    display:inline-block; 
 
} 
 
ul li a 
 
{ 
 
    position:relative; 
 
    top:-50px; 
 
    left:0; 
 
} 
 
ul li a:hover + .slide 
 
{ 
 
    transition: 1s; 
 
    z-index: 9999; 
 
    display: block; 
 
}

<div class='slider'> 
 
    <ul> 
 
    <li> 
 
     <a href="#slide1">Slide 1</a> 
 
     <div class='slide' id="slide1" style="display: block;"> 
 
     <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576006.jpg" width="450" height="150" /> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#slide2">Slide 2</a> 
 
     <div class='slide' id="slide2"> 
 
     <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575498.jpg" width="450" height="150" /> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#slide3">Slide 3</a> 
 
     <div class='slide' id="slide3"> 
 
     <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576753.jpg" width="450" height="150" /> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="#slide4">Slide 4</a> 
 
     <div class='slide' id="slide4"> 
 
     <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575922.jpg" width="450" height="150" /> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

私は便宜上、次と前のボタンを削除したが、また再びそれらを含めるのは簡単だろう。