只有當前元素的jQuery懸停效果

我有一個包含圖像的Div的列表。當我將鼠標懸停在div上時，我希望圖像向上移動（我通過更改懸停時的圖像css來完成此操作）。我遇到的問題是，當我將鼠標懸停在一個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>

來源

2017-01-16 Sam Skirrow

顯示你的html也 –

請在示例中添加html。 – ppasler

@ L.Vadim增加了HTML - 現在整理它 –

$('.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嘗試指向當前圖像。

來源

2017-01-16 12:26:35 htmlbrewery

是的，雖然我怎麼找到這個圖片的高度被懸停了（對於screenshotHeight的值） –

@ SamSlirrow - screenshotHeight = $ this.find（'。l_admin-product-screenshot> img'）。height（）; – htmlbrewery

只有當前元素的jQuery懸停效果

回答

相關問題