0

サイズの異なる画像のギャラリーがあり、ホバーした画像のアイコンを垂直方向に中央揃えにしたいと考えています。私は以下のコードでこれを解決しようとしてきましたが、画像のすべての高さを正常に取得しましたが、特定の高さ、ホバーした画像のみを方程式に適用して関数を実行する方法がわかりません. 以下は私のコードです：

$(document).ready(function() {

var wrapper = $('.img-wrap', this); // Grab the wrapper, same as image size

    wrapper.prepend("<div class='cover'><img src='imgs/icons/search.png' alt='zoom into photo'></div>") // this is not so important

wrapper.each(function() {
    $this = $(this);
    var $height = $this.height(); // Get height of Wrapper or Image (same size)
    var $marginHeight = ($height - 32) / 2; // Height of Wrapper - Icon Size (32px) and divided by two to only get one half

    console.log($height) // Check height
    console.log($marginHeight) // Check one half 


    // Main problem
    wrapper.hover(
        function() {
            $('.cover img', this).css({
                "marginTop": $marginHeight
            });
        });


    // this runs fine
    wrapper.mouseout(
        function() {
            $('.cover img', this).css({
                "marginTop": 0
            });
        });
    });
});
4

1 に答える 1

0 
$(document).ready(function() {
    $('.img-wrap')
        .prepend("<div class='cover'><img src='imgs/icons/search.png' class="cover_img" alt='zoom into photo'></div>")
        .on('mouseenter mouseleave', function(e) {
            var h = e.type == 'mouseenter' ? ($(this).height() - 32) / 2 : 0;
            $(this).find('.cover_img').css('margin-top', h);
    });
});

フィドル

于 2013-08-17T19:42:01.697 に答える