JQuery的鼠标悬停图像叠加(JQuery mouseover image overlay)

只是想知道怎样才能正确地得到这个工作的100％。我觉得我几乎没有。

基本上，我有一个形象及当我将鼠标放置，我要覆盖（这是一个彩色格）出现在上面。

我在这本半工作小提琴。

<img src="http://mirrorchecker.com/images/rod_160.png" width="160"
class="company-image"/>
<div class="company-image-overlay"></div>

/* CSS */
.company-image
{
}
.company-image-overlay
{
width: 160px;
height: 160px;
background-color: #ffb00f;
z-index: 1;
opacity: 0.5;
    position: fixed;
    top: 0.5em;
    display:none;
}

/* JQUERY */
$('.company-image').mouseover(function()
     {
        $('.company-image-overlay').show();
     });
$('.company-image').mouseout(function()
     {
       $('.company-image-overlay').hide();
     });

这个问题似乎重叠出现时是，鼠标不再是技术上比.company-image ，因此我们得到的在输入/输出恒定的骑自行车和闪烁的背景。

有任何想法吗？

Answer 1:

最简单的解决方案是增加一个缠绕元件为两个元件：

<div class="wrap">
    <img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
    <div class="company-image-overlay"></div>
</div>

并把mouseover / mouseout 方法将该元素来代替：

$('.wrap').mouseover(function () {
    $('.company-image-overlay').show();
}).mouseout(function () {
    $('.company-image-overlay').hide();
});

JS提琴演示。

Answer 2:

而不是检查的.company-image元素，你将要检查的覆盖。请尝试以下操作。

$('.company-image').on("mouseover", function () {
    $('.company-image-overlay').show();
});

$('.company-image-overlay').on("mouseout", function () {
    $('.company-image-overlay').hide();
});