Question

我有这个标记：

<div class="contact-item"
    onmouseover="div_ContactItem_mouseover(this)">
</div>

<div id="div_ItemOver" 
 style="display: none;"
 class="contact-item-hover" 
 onmouseout="div_ItemOver_mouseout(this)">

 <div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div>
 <div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div>
 <div style="color: red; opacity: 1; width: 20px; height: 20px;">link1</div>
</div>

以及这些JavaScript语句：

function div_ContactItem_mouseover(e) {
 $("#div_ItemOver").show().offset($(e).offset());
};

function div_ItemOver_mouseout(e) {        
 $("#div_ItemOver").hide();
};

和这些CSS规则：

.contact-item, .contact-item-hover {

 cursor: pointer;
 display: inline-block;
 border-radius: 5px; 
 margin: 0px 3px 3px 0px; 
 width: 340px; 
 height: 90px;
 border: 1px solid #244f56; 
 background-color: #f8f8f8;
}

.contact-item-hover {

 background-color: #000000;
 position: absolute;
 opacity:0.12;
 filter:alpha(opacity=12);
}

我想要的是什么：

每当鼠标位于第一个div上的div css类的第一个div_ItemOver时，我需要显示带有div的第二个contact-item此外{ {1}} div_ItemOver css等于opacity。

问题是什么：

我0.12上有links，每当我继续这些链接时，会出现div_ItemOver和mouseout，这会导致类似闪烁的内容元素，为什么？如何删除此闪烁？
我不想mouseover反映第二个div中的opacity 0.12，为此，我在这些链接上设置了内联样式，将其不透明度设置为{ {1}}但它不起作用。如何在没有不透明度的情况下显示这些链接，并且完全清楚？

这是我的jsFiddle：http://jsfiddle.net/am1r_5h/1zrytzjw/2/

要查看问题，您需要将鼠标放在矩形上，然后移动到左上角的链接

Answer 1

如果你为两个div分配相同的处理程序，你的闪烁就消失了：

http://jsfiddle.net/1zrytzjw/4/

<div id="div_ItemOver" style="display: none;" class="contact-item-hover" onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)">
...
</div>

<div class="contact-item"  onmouseover="div_ContactItem_mouseover(this)" onmouseout="div_ItemOver_mouseout(this)"></div>

如果您将console.logs添加到原始小提琴中，您将看到每次将鼠标悬停在链接上时实际上都会发生鼠标输出事件，这会导致闪烁。

Answer 2

1）我不会详细介绍细节，但这必须在触发子元素时如何发生事件发生，它还会自动对父元素产生影响。您可以通过将e.stopPropagation();添加到div_ItemOver_mouseout()的开头来解决您的闪烁问题。所以它看起来像这样：

function div_ItemOver_mouseout(e) {        
   e.stopPropagation();
   $("#div_ItemOver").hide();
};

2）对于您的第二个问题，您是否有可能取消不透明度/过滤器设置，而是尝试background-color: rgba(R, G, B, A);格式？这样，如果您将以下更改更改为CSS，那么您的元素将按照您希望的那样显示：

.contact-item-hover {
    background-color:rgba(240, 240, 240, 0.25);
    position: absolute;
}

.contact-item-hover > div{
   background-color:rgba(240, 240, 240, 0.85);
   width:50px;
   height:20px;
   color:red;
}

.contact-item-hover > div实际上引用了您的链接，因此您不必为每个链接添加内联样式。

Answer 3

1）我用jQuery .hover（）替换了你的Javascript鼠标悬停/ mouseout函数，它使用了mouseon和mouseout参数http://api.jquery.com/hover/。闪烁不再存在。

2）我不确定你想要什么级别的不透明度，但你可以在.css（）事件中为mouseon和mouseout以及初始不透明度的CSS样式更改它。 / p>

 $("#div_ItemOver").css({"opacity":"1"})

我在悬停事件中引用了#div_ItemOver，因此当您将鼠标悬停在此部分上时，不透明度也会保持不变。

$(".contact-item, #div_ItemOver").hover()

其他一些变化：

我将您的样式放入CSS，因为您在多个地方使用相同的样式
我使用了位置和浮动功能，使您的链接显示在联系人项目DIV

这里是jsfiddle http://jsfiddle.net/1zrytzjw/8/

Answer 4

可以通过向mouseover添加mouseout和div处理程序来解决此问题。
可以通过background: rgba(0, 0, 0, 0.12);代替background-color: #000000;和opacity:0.12;

http://jsfiddle.net/1zrytzjw/10/

Answer 5

你可以通过将隐藏的div放在第一个div中来解决这个问题。所以只需将第一个div的结束div标记移动到底部。

我认为它闪烁的原因是因为当它击中那些＆＃34;链接＆＃34; divs，鼠标悬停状态被破坏，用你的链接隐藏div，但因为你的鼠标仍在那里，它立即被moused在第一个div上，因此再次显示链接。将隐藏的div放入其中使得链接是与鼠标悬停相关联的div的一部分，因此鼠标悬停现在包括链接。我希望这是有道理的。

显示和隐藏div元素并更改CSS中的不透明度

5 个答案: