jQuery 鼠标悬停图片叠加层

Question

我想知道如何让这个功能完美地运行。我认为我已经快要实现了。

基本上，我有一张图片，并且当我将鼠标悬停在图片上时，我希望一个覆盖层（即一个带颜色的div）出现在图片上方。

我在这个示例中部分实现了这个功能。

<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 上，因此我们会不断循环进行悬停/移开操作并导致背景闪烁。

有什么想法吗？

- Paul Smith

---

两个答案都不错，但我更喜欢David Thomas的答案，因为在6个月后查看代码并进行解释时，它更易读且更简单 :) - Paul Smith

选择一个答案。 - jeremy

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 Fiddle demo.

- David Thomas

---

我知道这已经是很多天前的事情了，但我遇到了同样的需求。我认为我们必须将显示设置为inline-block以适用于那个wrap类（在图像右侧移动鼠标指针仍然显示覆盖层），除此之外它是完美的答案。 - Vivekh

Answer 2

如果我是你，我会只使用CSS。实际上，你不需要任何像 show() 或者 hide() 这样的函数。我使用了一个标签进行包装，因为一些旧版本的Internet Explorer只能在这个标签上使用 :hover。

你可以在 这里 检查这个技巧。

- stefanz

---

啊，我明白了，stefanz，你实际上是让图像不透明，让背景“透过来”，这就是我最初想到的想法，但最终使用了JQuery。太棒了。我会把这个作为正确答案接受，但由于我确实问了关于JQuery的问题，所以我会选择一个JQuery示例，但最初（在发布这个问题之前）我尝试了一个全CSS选项。 - Paul Smith

+1 好建议，使用最少的JavaScript，比其他解决方案更好。 - Matt

Answer 3

不要检查.company-image元素，你需要检查覆盖层。尝试以下操作。

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

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

- jeremy