2017-01-16 9 views
0

画像を含むDivのリストがあります。 divの上にマウスを置くと、画像が上に移動します(私はホバー上の画像CSSを変更することでこれをやっています)。私が抱えている問題は、1つのdivにカーソルを合わせると、すべてのdivのすべての画像が変化していることです。代わりに、私がホバリングしているdivでちょうどホバー効果が起こるようにしたい。ここに私の現在のjQueryのです:ここでは現在の要素にjQueryのホバー効果のみ

jQuery(document).ready(function($){ 
 
    screenshotHeight = $('.l_admin-product-screenshot img').height(); 
 

 
    $('.l_admin-product').hover(function() { 
 
    $('.l_admin-product-screenshot img').css({ 
 
     top: -screenshotHeight 
 
    }); 
 
    }, 
 

 
           function() { 
 
    $('.l_admin-product-screenshot img').css({ 
 
     top: '0' 
 
    }); 
 
    }); 
 

 
});

は私のHTML構造である:

<div class="l_admin-products"> 

<div class="l_admin-product" tabindex="0"> 
      <input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-1-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2"> 
      <label for="layers-preset-layout-skizzar-homepage-1-radio"> 
       <input id="layers-preset-layout-skizzar-homepage-1-title" type="hidden" value="Splash Page"> 
       <input id="layers-preset-layout-skizzar-homepage-1-widget_data" type="hidden" value=""> 
       <div class="l_admin-product-screenshot"> 
        <img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage21_w515.png" width="320" style="top: 0px;">     </div> 
       <h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3> 
       <div class="l_admin-product-actions"> 
        <a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-1" data-key="layers-preset-layout-skizzar-homepage-1"> 
         Select      </a> 
       </div> 
      </label> 
     </div> 

<div class="l_admin-product" tabindex="0"> 
      <input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-2-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2"> 
      <label for="layers-preset-layout-skizzar-homepage-2-radio"> 
       <input id="layers-preset-layout-skizzar-homepage-2-title" type="hidden" value="Splash Page"> 
       <input id="layers-preset-layout-skizzar-homepage-2-widget_data" type="hidden" value=""> 
       <div class="l_admin-product-screenshot"> 
        <img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage2_w515.png" width="320" style="top: 0px;">     </div> 
       <h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3> 
       <div class="l_admin-product-actions"> 
        <a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-2" data-key="layers-preset-layout-skizzar-homepage-2"> 
         Select      </a> 
       </div> 
      </label> 
     </div> 

<div class="l_admin-product" tabindex="0"> 
      <input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-3-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-3"> 
      <label for="layers-preset-layout-skizzar-homepage-3-radio"> 
       <input id="layers-preset-layout-skizzar-homepage-3-title" type="hidden" value="Splash Page"> 
       <input id="layers-preset-layout-skizzar-homepage-3-widget_data" type="hidden" value=""> 
       <div class="l_admin-product-screenshot"> 
        <img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage3_w515.png" width="320" style="top: 0px;">     </div> 
       <h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3> 
       <div class="l_admin-product-actions"> 
        <a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-3" data-key="layers-preset-layout-skizzar-homepage-3"> 
         Select      </a> 
       </div> 
      </label> 
     </div> 

</div> 
+2

あなたのHTMLも表示 –

+1

例にhtmlを追加してください。 – ppasler

+0

@ L.VadimはHTMLを追加しました。ちょうど今まで整理しています –

答えて

0
$('.l_admin-product').hover(function() { 
    $this = $(this); 

    $this.find('.l_admin-product-screenshot > img').css({ 
    top: -screenshotHeight 
    }); 
},function() { 
    $this.find('.l_admin-product-screenshot img').css({ 
    top: '0' 
    }); 
}); 

は、現在のイメージを指すように$thisで試してみてください。

+0

はい、これはうまくいきます(screenshotHeightの値のために)$ hoverされているこの画像の高さはどのように見えますか –

+0

@ SamSlirrow - screenshotHeight = $ this.find( '。l_admin-product-screenshot> img')。高さ(); – htmlbrewery

関連する問題