Question

请帮助我。我曾经努力尝试但没有实现。我希望图像保留在自己的位置，即使鼠标移动它，我的意思是当鼠标从相关的<li>移动时到相关图像并继续图像，图像仍然显示。这是我的整个代码，包括我的悬停菜单和CSS类和javascript funcs.I做了悬停与CSS，但对于问题我尝试了评论jquery函数。我将是非常感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
<style type="text/css"> 


#holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border-top:1px solid #da8; border-bottom:1px solid #da8; z-index:100;}
#holder table {border-collapse:collapse; margin:-1px;}
#holder ul {float:left; padding:0; margin:0; list-style:none;}
#holder ul.sub {margin-bottom:-4px;}
#menuOuter li a.lv1-a {background:blue; zoom:1;}
#menuOuter li a.lv1-a:hover {direction:ltr;}

#holder ul.sub {float:left;}
#holder ul.sub ul {position:absolute; left:-9999px; top:180px;}
#holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;}

#holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;}
#holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;}
#holder ul.sub li.sub-li a.a1 {background:#e9a358;}
#holder ul.sub li.sub-li a.a2 {background:#e9a358;}
#holder ul.sub li.sub-li a.a3 {background:#9ea64b;}
#holder ul.sub li.sub-li a.a4 {background:#dfb344;}
#holder ul.sub li.sub-li a.a5 {background:#b8826e;}

#menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter li:hover ul.sub li.current ul {left:-9999px;}
#menuOuter li:hover ul.sub li.current a img {left:-9999px;}

#menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;}
#menuOuter a:hover ul.sub li.current ul {left:-9999px;}
#menuOuter a:hover ul.sub li.current a img {left:-9999px;}

#holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;}
#holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;}

#holder ul.sub li.current a {margin-top:0; height:350px;}
#holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;}

#menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;}
#menuOuter li:hover ul.sub li.current:hover ul {left:0;}
#menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}

#menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;}
#menuOuter a:hover ul.sub li.current a:hover ul {left:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;}
#menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}


#holder ul.sub li {position:relative;}

#holder ul.sub li.sub-li:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.sub-li a:hover ul {left:0; width:130px;}
#holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}
#holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;}
#holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;}
#holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;}

#holder ul.sub li.current ul {left:0; width:130px;}
#holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;}
#holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;}

#holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#000; text-decoration:none; font-size:11px;}
#holder ul.sub li.p1 span {background:#ffe398;}
#holder ul.sub li.p2 span {background:#ffe398;}
#holder ul.sub li.p3 span {background:#dee68b;}
#holder ul.sub li.p4 span {background:#fff384;}
#holder ul.sub li.p5 span {background:#f8c2ae;}



</style> 
<script 
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<!--<script type="text/javascript">
    $(document).ready(function () { $('a').mouseleave(function () { $(this).unbind("mouseleave"); }); });
    </script>
    <script type="text/javascript">
$(function()
 var timerId;
 var ticker = function()
 {
    timerId = setTimeout(function(){
    $('#menuOuter li:first').animate( {marginTop: '-22px'}, 250, function()
    {
       $(this).detach().appendTo('ul#menuOuter').removeAttr('style');});
       ticker();
    }, 1500);       
 };

 $('#menuOuter').hover(function() { 
     $('#menuOuter  li:first').stop();         
     clearTimeout(timerId);   
 }, ticker);

 ticker();

});
 </script>-->

<!--<script type="text/javascript"> 

    startList = function () {
        var sfEls = document.getElementById("d").getElementsByTagName("li");
        for (var i = 0; i < sfEls.length; i++) {
            sfEls[i].onmouseover = function () {
               for (var j = 0; j < sfEls.length; j++) {
                    sfEls[j].className = sfEls[j].className.replace(new RegExp(" sub\\b"), "");
                }
                this.className += " sub"; 
            }
        }
    }

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    addLoadEvent(startList);

</script>-->
</head> 



<body id="www-cssplay-co-uk" class="menus"> 


<div id="holder"> 
<ul id="menuOuter"> 
    <li class="lv1-li"> 
    <!--[if lte IE 6]><a class="lv1-a" href="#url1"><table><tr><td><![endif]--> 
        <ul class="sub" id="d"> 
            <li class="sub-li p1 current"  href="#url"><a  class="a1" href="" >
               <img src="a2.jpg" /><b>guest room</b><!--[if gte IE 7]><!--></a><!--<![endif]--> 
            <!--[if lte IE 6]><table><tr><td><![endif]--> 
                <ul> 
                    <li><a href="#url">1</a></li> 
                    <li><a href="#url">2</a></li> 
                    <li><a href="#url">3</a></li> 
                    <li><a href="#url">4</a></li> 
                    <li><a href="#url">5</a></li> 
                    <li><a href="#url">6</a></li> 
                    <li><a href="#url">7</a></li> 
                </ul> 
                <span>explainations</span> 
            <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
            </li> 
            <li style="display:block; float:left; width:450px; height:240px" >
                <a style="margin-top:200px; width:410px; display:block; padding:0 20px; height:150px; line-height:40px; color:#fff; background-color:#9ea64b" 
                    href="#url"></a>

            </li> 

            <li class="sub-li p5"><a class="a5" href="#url"><img src="pic5.jpg" /><b>baby room</b><!--[if gte IE 7]><!--></a><!--<![endif]--> 
            <!--[if lte IE 6]><table><tr><td><![endif]--> 
                <ul> 
                    <li><a href="#url">Sleep Suits</a></li> 
                    <li><a href="#url">//</a></li> 
                    <li><a href="#url">//</a></li> 
                    <li><a href="#url">//</a></li> 
                    <li><a href="#url">//</a></li> 
                    <li><a href="#url">//</a></li> 
                    <li><a href="#url">//</a></li> 
                </ul> 
                <span>//</span> 
            <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
            </li> 
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 


</li> 
</ul> 
</div> 

</body> 
</html>

顺便说一句，我也试过'removeclass'，但什么都没发生。当没有任何事情发生时，firebug没有发生任何错误，我确信调用了jquery（因为，例如我可以轻松地改变鼠标悬停时的背景颜色）但是我无法使图像停止而不会消失。

Answer 1

尝试添加

#holder ul.sub li.sub-li {
    display: block;
    float: left;
    height: 240px;
    width: 150px;
    z-index: 1;
}

如果那就是你想要的，你真的很奇怪。

如何让图像留在鼠标上自己的位置

1 个答案: