JQuery鼠标悬停图像叠加

JQuery鼠标悬停图像叠加

本文介绍了JQuery鼠标悬停图像叠加的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

只是想知道我怎样才能100%正确地工作。我想我快到了。



基本上,我有一张图片&当我鼠标悬停,我想要覆盖(这是一个彩色div)出现在顶部。



我有这个半工作在这个。

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

/ * CSS * /
。公司图片
{
}
。公司图片叠加
{
width:160px;
height:160px;
background-color:#ffb00f;
z-index:1;
不透明度:0.5;
位置:固定;
top:0.5em;
display:none;

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

这个问题似乎是当覆盖层出现时,鼠标技术上不再是 .company-image 因此我们得到一个不断循环的over / out和闪烁的背景。

有什么想法?

解决方案

最简单的解决方案是为这两个元素添加一个包装元素:

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

然后放置 mouseover / <$ c

  $($ c> mouseout 方法   '.wrap')。mouseover(function(){
$('。company-image-overlay')。show();
})。 ('.company-image-overlay')。hide();
});


Just wondering how I can get this working 100% correctly. I think I'm nearly there.

Basically, I have an image & when I mouseover, I want an overlay (which is a coloured div) to appear over the top.

I have this semi-working in this 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-image therefore we get a constant cycling of over / out and the flashing background.

Any ideas?

解决方案

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/mouseout methods to that element instead:

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

JS Fiddle demo.

这篇关于JQuery鼠标悬停图像叠加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 13:49