javascript - jQuery 悬停效果仅对当前元素有效

Question

我有一个包含图像的 Div 列表。当我将鼠标悬停在一个 div 上时，我希望图像向上移动(我通过在悬停时更改图像 css 来做到这一点)。我遇到的问题是，当我将鼠标悬停在一个 div 上时，所有 div 中的所有图像都在变化。相反，我希望悬停效果只发生在我悬停的 div 上。这是我当前的 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>

Answer 1

$('.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 指向当前图像。