无法在可见溢出内容上使用悬停
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'> </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:relative
和 z-index:999
。
第二个问题是hover
不是一个事件。它是mouseenter
和mouseleave
事件的快捷方式。
所以你需要按以下方式使用它(注意它会在进入和离开时触发)
$('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 上滚动溢出内容