0

同じクラスの多くの div とクラスpro3の画像がありますshowcatdiv

そして、これはワードプレスページの任意の画像に追加されます..以下pro3のホバーでdivを表示したいのshowcatdivは私のpro3divです

 <div class="pro3catProducts" style=" background-color: #FFFFFF; border: 0px solid black;
    height: 279px; left: '200'px; opacity: 0.55; padding-left: 10px;
    position: relative; top: '100'px; width: 39px; display:none;">
            <IMG class="catsmallImages" id="catsmallImages1" SRC="Images/fashion.png"  BORDER="1" ALT="" style="height: 37px; padding: 3px; width: 28px;">
            <IMG class="catsmallImages" id="catsmallImages2" SRC="Images/fashion.png"  BORDER="1" ALT="">
                </div>

私はそれのためにjavascriptを書きました

<script type="text/javascript">
  if ( undefined !== window.jQuery ) {
    // script dependent on jQuery

        alert("test");
        jQuery(".showcatdiv").hover(function(){ 
           //alert("test324");
    jQuery(".pro3catProducts").show();  
    });

  }
</script>

これにより、すべての画像にpro3 divが表示されます..その特定の画像に表示したいですか??

画像 1

画像 2

最初の画像は、ホバー効果を付けたい画像を示しています...そして、2番目の画像は必要なことを行いますが、その特定の画像に必要なだけで、ここではすべての画像に表示されています..

4

3 に答える 3

2

pro3とshowcatdivの両方がにあり、にカーソルを合わせたときmaindivに表示したい場合は、CSS を使用してそれを実現できます。pro3showcatdiv

.pro3 {
    display: none;
}
.showcatdiv:hover+.pro3 {
    display: block;
}

http://jsfiddle.net/KvrGk/2/

JavaScript、特に jQuery は必要ありません。ただし、兄弟セレクターのサポートを確認してください。

于 2013-04-30T10:21:53.570 に答える
1

OK、このように divimgの兄弟であると仮定しましょう:pro3

<img class="showCatDiv" ... />
<div class="pro3..." ... >...</div>

次に、JS は次のようになります。

$('.showCatDiv').hover(function(){
    $(this).parent().find('.pro3').show();  
});

共通の親を見つけて、表示するこのpro3div を探します。

または

$('.showCatDiv').hover(function(){
    $(this).next('.pro3').show();  
});

pro3これは、 の兄弟である div に依存していimgます。

于 2013-04-30T10:19:34.750 に答える
1

pro3 と showcatdiv の間には関係はありません...どちらも 1 つの div Maindiv に含まれています

それらが1つのdiv内にある場合はコメントを参照してください..次に、this参照を使用して親を取得し、.pro3catProducts これを試してください..

 <script type="text/javascript">
 if ( undefined !== window.jQuery ) {
    alert("test");
    jQuery(".showcatdiv").hover(function(){ 
      jQuery(this).parent().find(".pro3catProducts").show();  //<--here
    });

 }
</script>
于 2013-04-30T10:17:12.517 に答える