javascript - 添加了一个 box-shadow，出现这个问题？？？

问题描述

问 题

鼠标移到【浏览】处时，用JQ做了一个显示隐藏的框，当我把鼠标移到显示框上的时候出现这个问题，怎么解决

显示框移动上去了，【有时候会出现，这种情况】

html代码

<a onmouseover="browse(this)" onmouseout="nonebrowse(this);"> 浏览 </a>

<ul style="width:500px;position:absolute;z-index:9999;left:-400px;top:32px;display:none;background:#f5f5f5;" class="htlist" >
    <li></li>
    <li></li>
    <li></li>
</ul>

样式代码

 .htlist{
        border-radius:5px;
        box-shadow: 8px 8px 2px #888888;
    }
 .htlist  li{
     cursor:pointer;font-size:12px;width:250px;float: left;
 }
 .htlist  li:hover{
     background:#ddca3e;color:white;
 }
 .htlist  li a{
     display:inline-block;width:100%;height:100%;
 }

jq显示隐藏代码

function  browse(now) {
    var obj = $(now).siblings("ul").slideDown(200);
}
        
function  nonebrowse(now) {
    var obj = $(now).siblings("ul").slideUp(200); 
}
$(function(){
    $(".htlist").hover(
        function(){
            $(".htlist").stop(true).show();
        },
        function(){
            $(".htlist").stop(true).hide();
        }) 
    })

解决方案

1. 代码好乱……除非调试，否则标签里不建议写这么多style，推荐你在浏览器调试的时候可以直接写在Elements的Styles里，然后等样式ok了以后再统一粘贴回css文件对应的位置（Styles里有行号）；而且事件也推荐统一用jq的事件监听来写，一会儿标签里一会儿js太分裂了。

2. 建议你可以在<a>的mouseover事件发生时，（下边是处理逻辑）先触发slideDown()动画，然后用一个变量缓存一个setTimeout延时触发slideUp()，时间你自己定吧，记得变量声明在事件处理外边别回头找不到了就行；然后<a>的mouseout事件就甭管了，.htlist在mouseover的时候（也就是hover()第一个参数）先clearTimeout掉刚才的setTimeout（直接stop()掉了所以会出现一半的情况），然后在mouseout时再执行slideUp()应该就没问题了。

这篇关于javascript - 添加了一个 box-shadow，出现这个问题？？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！