как сделать изображение остаться в своем собственном месте на мышь над

, пожалуйста, помогите мне. Я очень старался для этого, но ничего не достиг. Я хочу, чтобы изображение оставалось на своем месте, даже когда мышь идет на него, я означает, что когда мышь перемещается от релевантного <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>

Кстати, я также попробовал «снять стекло», но ничего не произошло. при выполнении функций ничего не происходит, и firebug не дает мне никаких ошибок, и я уверен, что вызван jquery (потому что, например, я могу легко изменить цвет фона при наведении курсора мыши), но я не могу заставить изображение остановиться и не исчезнуть.

источник

2013-06-15 jal nami

Недостаточно кода? – adeneo

Что вы имеете в виду? –

, пожалуйста, никто не знает? –

Попробуйте добавить

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

Если это то, что вы хотите, у вас есть на самом деле странно CSS.

источник

2013-06-15 19:03:33 ccd580ac6753941c6f84fe2e19f229

да, это именно то, что я хочу, но как? Не нужен javascript? Большое вам спасибо, и почему это странно? –

как сделать изображение остаться в своем собственном месте на мышь над

ответ

Смежные вопросы