JQuery 鼠标悬停图像叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15722997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery mouseover image overlay
提问by Paul Smith
Just wondering how I can get this working 100% correctly. I think I'm nearly there.
只是想知道我如何才能 100% 正确地工作。我想我快到了。
Basically, I have an image & when I mouseover, I want an overlay (which is a coloured div) to appear over the top.
基本上，我有一个图像，当我将鼠标悬停在时，我希望在顶部出现一个叠加层（这是一个彩色 div）。
I have this semi-working in this fiddle.
我在这个fiddle 中有这个半工作。
<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();
});
The issue seems to be when the overlay appears, the mouse is no longer technically over the .company-imagetherefore we get a constant cycling of over / out and the flashing background.
问题似乎是当覆盖出现时，鼠标在技术上不再位于上方，.company-image因此我们会不断循环过度/退出和闪烁的背景。
Any ideas?
有任何想法吗？
回答by David says reinstate Monica
The simplest solution is to add a wrapping element for both elements:
最简单的解决方案是为两个元素添加一个包装元素：
<div class="wrap">
<img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
<div class="company-image-overlay"></div>
</div>
And place the mouseover/mouseoutmethods to thatelement instead:
和地点mouseover/mouseout方法，即元素来代替：
$('.wrap').mouseover(function () {
$('.company-image-overlay').show();
}).mouseout(function () {
$('.company-image-overlay').hide();
});
回答by jeremy
Instead of checking the .company-imageelement, you're going to want to check the overlay. Try the following.
与其检查.company-image元素，不如检查覆盖层。请尝试以下操作。
$('.company-image').on("mouseover", function () {
$('.company-image-overlay').show();
});
$('.company-image-overlay').on("mouseout", function () {
$('.company-image-overlay').hide();
});
回答by stefanz
If i were you i would use only css. Actually you do not need any kind of functions like show()or hide(). I used an tag for wrapping because some old Internet Explorer versions does know about :hoveronly on this tag.
如果我是你，我只会使用 css。实际上，您不需要任何类型的功能，例如show()或hide()。我使用了一个标签来包装，因为一些旧的 Internet Explorer 版本:hover只知道这个标签。
You can check the trick here
你可以在这里检查技巧
