Question

当我悬停在那个div上时，我有2个div与同一个类“wrap”我希望在我徘徊的特定div上显示叠加

这是我试过的

<div class="wrap" style="display:inline-block">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTQ3aCNvaNCCoxQWqb6PZS1MZZjED5umfE0OPhfjnKsYY8BTSOKY3cIBHzj"  alt="RF1"  class="company-image" />            
            <div class="Image-Overlay"></div>
        </div>
        <div class="wrap" style="display:inline-block">
                     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTQ3aCNvaNCCoxQWqb6PZS1MZZjED5umfE0OPhfjnKsYY8BTSOKY3cIBHzj"  alt="RF2"  class="company-image" />            
                     <div class="Image-Overlay"></div>
               </div>

这是我的脚本

<script type="text/javascript">
    $(document).ready(function () {

        $('.wrap').mouseover(function () {
            var x=$(this)
            debugger;
            $('.Image-Overlay').show();                
        }).mouseout(function () {
            $('.Image-Overlay').hide();
        });
    })

</script>

和我的风格

<style>
    .Image-Overlay {
        width: 284px;
        height: 177px;
        background-color: #4baad3;
        z-index: 1;
        opacity: 1;
        position: fixed;
        top: 0.5em;
        display: none;
    }

    .company-image {
    }
</style>

Answer 1

根据我的理解，当您将鼠标悬停在图像上时，您希望相应的叠加层显示在图像顶部。

父元素相对定位很重要，子元素（悬停div）绝对相对于父元素定位。下面的CSS代码中的更改会解决这个问题。

在此处查看演示：http://jsfiddle.net/C7RPZ/1/

CSS：

.wrap {
    position: relative;
    width: 284px;
    height: 177px;
    display: inline-block;
}    

.Image-Overlay {
    width: 284px;
    height: 177px;
    background-color: #4baad3;
    z-index: 100;
    opacity: 1;
    display: none;
    position: absolute;
    top: 0;
}

.company-image {
    z-index: 0;
}

JavaScript的：

$(document).ready(function () {
    $('.wrap').mouseover(function () {
        $('.Image-Overlay', this).show();                
    }).mouseout(function () {
        $('.Image-Overlay', this).hide();
    });
});

纯CSS解决方案

更新：第二个想法，在描述问题范围的情况下，根本不需要JavaScript。您可以删除JavaScript并将以下CSS添加到上面显示的CSS中，这将显示父元素悬停时的叠加层（请参阅此处演示：http://jsfiddle.net/C7RPZ/2/）。

.wrap:hover > .Image-Overlay {
    display: inline;
}

Answer 2

你想要这样的东西：

jQuery的：

$(document).ready(function () {

    $('.wrap').mouseover(function () {
        $(this).find('.Image-Overlay').show();
    }).mouseout(function () {
        $(this).find('.Image-Overlay').hide();
    });
})

因此，您使用$(this)查找已悬停的内容，然后使用.find获取.Image-Overlay（div）下的课程$(this)。

DEMO HERE

Answer 3

这是解决方案。

  $(document).ready(function () {

        $('.wrap').mouseover(function () {
            var x=$(this)
            debugger;
            $('.Image-Overlay', this).show(0);                
        }).mouseout(function () {
            $('.Image-Overlay', this).hide(0);
        });
    })

这是DEMO .. http://jsfiddle.net/9R9br/3/

Answer 4

或者你也可以只使用CSS，因为方法show（）和hide（）只是改变了display属性。无论如何，如果不针对您正在悬停的那个，您的脚本解决方案将无效。

仅CSS解决方案

    .wrap {
        position: relative;
        display: inline-block;
        margin-top: 10px;
    }
    .wrap:first-child {
        margin-top:0;
    } 
    .wrap img {
        display: block;
    }
    .wrap .Image-Overlay {
         background-color: #4baad3;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         visibility: hidden;
        }
    .wrap:hover .Image-Overlay {
        visibility: visible;
        opacity: 0.6;
    }

http://jsfiddle.net/Bm5xL/38/

悬停时覆盖特定图像

4 个答案:

纯CSS解决方案

jQuery的：