为什么用css中伪类hover实现（鼠标悬停显示文字，鼠标移走文字消失）的效果失败（脚本没有错）？

html-css07

为什么用css中伪类hover实现（鼠标悬停显示文字，鼠标移走文字消失）的效果失败（脚本没有错）？,第1张

根据你的样式来看，你的页面布局是不是这样的<div class="box"><span>购物车</span><div class='detail'>购物相关信息</div></div>，如果是的话，那我觉得你hover用错了。

应该是.box:hover .detail{}，也就是说，你写的.box:hover.detail{}hover后面少了一个空格。

纯css？没有吧？还是得用点js的。。。给你提供一个常规的思路，当鼠标在一级菜单上的时候，设定一个定时器，这个定时器是判断鼠标离开一级菜单0.5S后是否移动到二级菜单里边，如果移动到二级菜单里边，取消定时器，二级菜单不消失。。。如果没有进入到二级菜单里边则二级菜单消失。。。。。。以上是多级菜单的常规思路。

我使用setTimeout() 来延时一秒，但没有效果，不知道什么地方出错了，现列出基本代码，请大家指正。

首先，在DIV中添加了鼠标动作：<DIV id="xiexiedajia" onmouseover="showlink()" onmouseout="closelink()">

Javascript代码如下

JavaScript code

?

1

2

function closelink(){window.setTimeout('closel()',1000)}

function closel(){document.getElementById("xiexiedajia").style.display="none"}

实现延时一秒的作用是当用户将鼠标点在菜单并往右移动时，偶尔可能移出菜单，这时候菜单就会消失，用户又要重新点开菜单，很不爽，希望能够在鼠标移出很短时间内菜单仍旧存在，这时候用户鼠标又移入时菜单还在。

当用户将鼠标移出超过1秒后就认为用户本身不想使用菜单了，这时候菜单就消失。