私はどのように画像onmouseoverリンクをプログラムでスライドさせることができますか？

Question

私は簡単な仕事のポートフォリオを用意しようとします。私はデータベースからプログラム的に作品を選びます。私はちょうどdivの仕事の変化の背景イメージの上にマウスでやりたい上記UL李オン

<div> 
    <div style="width:100%; position:absolute;"> 
    <ul> 
    <li style="background-image:url(1.png);"></li> 
    <li style="background-image:url(2.png);"></li> 
    <li style="background-image:url(3.png);"></li> 
    </ul> 
    </div> 

    <div class="row"> 
     <div class="col-lg-4"> 
      <a href="#">WORK 1</a> 
     </div> 
     <div class="col-lg-4"> 
      <a href="#">WORK 2</a> 
     </div> 
     <div class="col-lg-4"> 
      <a href="#">WORK 3</a> 
     </div> 
    </div> 
</div> 

私は下のリンクの上にマウス私はそれらのいずれかをスライドさせますときに、これらは私のイメージでタグ付けします。どのように私は画像をスライドすることができます。私はすべてのliタグを一致させるべきですか？

Answer 1

作業項目に識別子を追加します。 work_1、work_2などと同様に、すべての項目にクラスを追加します。

<div> 
    <div style="width:100%; position:absolute;"> 
    <ul> 
    <li id="work_1" class="work-item" style="background-image:url(1.png);"></li> 
    <li id="work_2" class="work-item" style="background-image:url(2.png);"></li> 
    <li id="work_3" class="work-item" style="background-image:url(3.png);"></li> 
    </ul> 
    </div> 

    <div class="row"> 
     <div class="col-lg-4"> 
      <a href="#" data-show="work_1">WORK 1</a> 
     </div> 
     <div class="col-lg-4"> 
      <a href="#" data-show="work_2">WORK 2</a> 
     </div> 
     <div class="col-lg-4"> 
      <a href="#" data_show="work_3">WORK 3</a> 
     </div> 
    </div> 
</div> 

各アイテムのすべてのアイテムを非表示にすると、アイテムがすべて非表示になり、そのアイテムがリンクされているアイテムが表示されます。

<script> 
$('.work_hover').mouseover(function() { 
    var id_to_show = $(this).attr('show'); 
    $('.work-item').hide(); 
    $('#' + id_to_show).show(); 
}); 
</script> 

あなたがショーにクールなアニメーションを追加し、メソッド