无法在可见溢出内容上使用悬停

Posted

技术标签:

【中文标题】无法在可见溢出内容上使用悬停【英文标题】:unable to use hover on visible overflow content 【发布时间】:2013-02-07 06:41:54 【问题描述】:

不幸的是,我发现自己试图解决一个不能完全满足我需求的布局。也就是说,目前还不能完全改变它。

也就是说,我基本上有一些溢出内容,我设置了溢出:可见,还有一个空白:nowrap。这基本上就像一个列跨度。

这是Js Fiddle

由于 SO 需要它,这里有一些示例代码。

html:

<div class='container'>
<div class='third'>one</div>
<div class='third'>two</div>
<div class='third'>three</div>
</div>
<div class='container'>
<div class='third overflow'>this is some really long <a> hover </a></div>
<div class='third'>&nbsp;</div>
<div class='third'>has to align w/ three</div>
</div>

CSS:

div float:left;
div.third width: 33%;
div.container width: 400px;overflow:hidden;
div.overflow  overflow:visible; white-space:nowrap;
a color: green;font-weight:bold;
a:hover color: red; 

js:

$(document).ready(function () 

$('div.overflow a').bind('mouseenter', function() 
    alert('mouse enter');
);

$('div.overflow a').bind('hover', function() 
    alert('hover');
);
/* just to prove it is wired up */
$('div.overflow a').trigger('hover'););

【问题讨论】:

【参考方案1】:

第一个问题不是溢出,而是下面的.third 元素在它之上并且它吸收鼠标事件..

要解决此问题,请在 div.overflow a 元素上添加 position:relativez-index:999

第二个问题是hover 不是一个事件。它是mouseentermouseleave 事件的快捷方式。

所以你需要按以下方式使用它(注意它会在进入和离开时触发

$('div.overflow a').hover(function() 
    alert('hover');
);

Demo at http://jsfiddle.net/D639t/3/(使用console.log代替alert

【讨论】:

谢谢。我曾尝试过 z-index 的东西,但缺少位置相关部分。悬停 jquery 的东西是我并不真正关心的动态演示。

以上是关于无法在可见溢出内容上使用悬停的主要内容,如果未能解决你的问题,请参考以下文章

内容溢出时无法滚动

如何在 Flutter 中删除父 ListView 之外的 InkWell 悬停颜色溢出?

Essential Grid Fancybox - 无法在移动 chrome 上滚动溢出内容

由于不透明过滤器,IE8 div 溢出不可见(截止)

为啥要使用 resize css 属性调整任何 div 都需要溢出!= 可见?

无法隐藏溢出内容