Question

#main div有一组.group div，每个div包含1个图像。所有都是静态的。

<div id="main" class="mx-auto">
    <div class="group">
        <img src="" width="35">
    </div>

    <div class="group">
        <img src="" width="35">
    </div>

    <div class="group">
        <img src="" width="35">
    </div>
    <div class="group">
        <img src="" width="35">
    </div>
    <div class="group">
        <img src="" width="35">
</div>
</div> <!-- main -->

现在，我需要的是，当我将鼠标悬停在.group上时，所有其他.groups应该会消失，并且悬停应该保持在同一位置。

我尝试过的JavaScript如下所示。

$('.group').mouseenter(function(){
    $('.group').each(function() {
        $(this).css({
            'position'  : 'relative',
            'left'      : $(this).offset().left,
            'top'       : $(this).offset().top
        }); //$(this).css
    }); // $('.social-group').each
}); // $('.social-group').mouseenter

但不幸的是，它不起作用。谁能指出什么是错的？

Answer 1

我相信这会节省你的一天：

    $('.group').mouseenter(function(){
         $(this).siblings().css({'opacity':0});
    }).mouseleave(function(){
         $(this).siblings().css({'opacity':1});
    });

或者您可以像这样设置流程动画：

    $('.group').mouseenter(function(){
       $(this).siblings().animate({'opacity':0},300);
    }).mouseleave(function(){
       $(this).siblings().animate({'opacity':1},300);
    });

如何将绝对位置，静态定位元素放在同一位置？

1 个答案: