悬停链接的 JavaScript 和延迟？
Posted
技术标签:
【中文标题】悬停链接的 JavaScript 和延迟？【英文标题】：JavaScript & Delay on Hovering Links? 【发布时间】：2014-12-27 06:48:20 【问题描述】：有没有办法通过 javascript 在计时器关闭之前设置链接？我不希望它看起来那么敏感。例如，如果用户不小心将鼠标悬停在链接上，它会立即关闭。有视频推荐或链接吗？
谢谢，
我没有使用 jQuery……
*
padding: 0;
margin: 0;
body
padding: 5px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
ul
list-style: none;
ul li
float: left;
padding-right: 1px;
position: relative;
ul a
display: table-cell;
vertical-align: middle;
width: 100px;
height: 50px;
text-align: center;
background-color: #2F2F2F;
color: #AE0002;
text-decoration: none;
ul a:hover
background-color: #828282;
color: #FFFFFF;
li > ul
display: none;
position: absolute;
left: 0;
top: 100%;
li:hover > ul
display: block;
li > ul li
padding: 0px;
padding-top: 1px;
li > ul li > ul
left: 100%;
top: 0;
padding-left: 1px;
li > ul li > ul li
width: 100px;
<body>
<ul>
<li><a href="#">Sports News</a>
<ul>
<li><a href="#">Football</a>
<ul>
<li><a href="http://www.nfl.com/">NFL</a>
</li>
<li><a href="http://espn.go.com/nfl/">ESPN Football</a>
</li>
</ul>
</li>
<li><a href="#">Baseball</a>
<ul>
<li><a href="http://mlb.mlb.com/home">MLB</a>
</li>
<li><a href="http://espn.go.com/mlb/">ESPN Baseball</a>
</li>
</ul>
</li>
<li><a href="#">Soccer</a>
<ul>
<li><a href="http://www.fifa.com/">FIFA</a>
</li>
<li><a href="http://www.espnfc.us/">ESPN Soccer</a>
</li>
</ul>
</li>
<li><a href="#">Basketball</a>
<ul>
<li><a href="http://www.nba.com/">NBA</a>
</li>
<li><a href="http://espn.go.com/nba/">ESPN Basketball</a>
</li>
</ul>
</li>
<li><a href="#">Auto Racing</a>
<ul>
<li><a href="http://espn.go.com/racing/">ESPN Racing</a>
</li>
<li><a href="http://www.nascar.com/en_us/sprint-cup-series.html">Nascar</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>【问题讨论】：
设置 ul 以阻止 li 的悬停，而不是 css 您可以使用 javascript 来执行此操作。处理 mouseover 和 mouseout 事件以显示/隐藏。要延迟、悬停、显示使用计时器和鼠标悬停、隐藏和清除计时器。 【参考方案1】：使用 javascript 显示/隐藏 ul，而不是 css。处理 mouseover 和 mouseout 事件以显示/隐藏。要延迟、悬停、显示使用计时器和鼠标悬停、隐藏以及清除计时器。
function show(ul)
ul.css("display", "inline-block");
function hide(ul)
ul.css("display", "none");
$("li").mouseover(function ()
var ul = $(this).children("ul");
var timer = setTimeout(function ()
show(ul);
, 400);
$(this).data("timer", timer);
).mouseout(function ()
var ul = $(this).children("ul");
var timer = $(this).data("timer");
clearTimeout(timer);
hide(ul);
);
演示：http://jsfiddle.net/k06dLnmk/
【讨论】：
【参考方案2】：您可以使用转换延迟。
transition-delay:1s;
类似问题：
Delay hover
或者你可以使用 javascript 来切换 css 类
window.setInterval("javascript function", milliseconds);
编辑：哦，抱歉，正如评论所指出的那样。显示无不适用于转换延迟。您会考虑改用可见性属性吗？
div > ul
. . .
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
div:hover > ul
visibility:visible;
opacity:1;
transition-delay:0s;
【讨论】：
你不能transition-delaydisplay:none。以上是关于悬停链接的 JavaScript 和延迟？的主要内容，如果未能解决你的问题，请参考以下文章
是否可以使用 Javascript 在页面刷新时随机生成预先确定的链接颜色和悬停颜色？