Текст, отсутствующий в Div

-1

Я пытаюсь показать div с именем «Содержание», когда пользователь наводит на карту изображения, которую я создал. Кроме того, я также пытался сделать его Visibility имущество Hidden и изменить его на Show, когда пользователь наводил на карту, но это не получилось.Текст, отсутствующий в Div

Кроме того, у меня есть еще один div, называемый «Members», который я хочу сохранить на правой стороне изображения.

Поворот со свойствами вызывает внезапное исчезновение текста. Почему это происходит & как я могу его решить?

Вот мой код:

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      #pipelines { 
       margin-left: auto; 
       margin-right: auto; 
       margin-top: auto; 
       margin-bottom: auto; 
       float:left; 

      } 
      #content { 
       font-family: Helvetica Neue; 
       border: solid; 
       padding-left: 10px; 
       padding-right:10px; 
       border-radius: 2px; 
       background-color: white; 
       position: relative; 
       width: 20%; 
       height: 0; 
       padding-bottom: 20%; 

      } 
      hr{ 
       background-color:#000; 
      } 
      h4{padding-bottom:0px; 
      padding-top:0px;} 
      #members{ 
       float:right; 
       position:relative; 
      } 

     </style> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Pipeline</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

    </head> 

    <body> 
     <div id="pipelines"> 
      <img src="2D_Pipeline.jpg" usemap="#Map" border="0"/> 
      <map name="Map" id="Map"> 
       <area shape="rect" coords="155,70,267,96" href="#" alt="Writers" /> 
      </map> 


     </div> 
     <div id="members"><h1>Mem</h1></div> 
     <div id="content"> 
      <h4></h4> 
      <hr /> 
      John Howard 
     </div> 
     <script> 

      $("#Map").on('mouseenter', function(e) { 
       //$("#content").css("visibility", "show"); 
       $("#content").stop().show(); 
       $("#content").offset({ 
        left : e.pageX, 
        top : e.pageY 
       }); 
       var alt_script = $("area").attr("alt"); 
       $("#content h4").html(alt_script); 
      }); 

      $("#content").on('mouseenter', function(e) { 
       //$("#content").css("visibility", "show"); 
       $("#content").stop().show(); 

      }); 

      $("#Map").on('mouseleave', function(e) { 
       $("#content").stop().delay(500).hide(); 
      }); 

      $("#content").on('mouseleave', function(e) { 
       $("#content").stop().delay(500).hide(); 
      }); 

     </script> 
    </body> 
</html>

А вот образ я использую: http://imgur.com/eJK42SZ :)

источник

2013-06-19 Mathew Elis

delay() не работает с hide() или show(), если не обеспечить очередь ослабление/анимации.

delay() только очереди следующей анимации, и поскольку методы, подобные hide(), являются мгновенными (а не анимационными), они не находятся в очереди и, следовательно, не задерживаются.

Что вы можете сделать

var timer = setTimeout(function() { $('#id').hide(); }, 500);

И использовать clearTimeout(timer);, чтобы предотвратить функцию от выполнения.

источник

2013-06-19 21:24:04

Так что, в основном, я должен удалить .delay()? –

Это то, что вы хотите, или я что-то упускаю?

http://jsfiddle.net/blackjim/3NShg/3/ (Ctrl + Shift + Enter, чтобы увидеть его в окне браузера)

$("#pipelines") 
.on('mouseenter', function (e) { 
    // setTimeout here if you want and change fadeIn to show(); 
    $('#content').fadeIn(400); 
}) 
.on('mouseleave', function (e) { 
    $('#content').fadeOut(400) 
});

источник

2013-06-19 21:51:07 AntouanK

Я на самом деле решить эту странную проблему с помощью Overflow: Hidden & настройки других свойств, а также.

Те, кто ответил, спасибо за помощь. :)

источник

2013-06-20 10:31:00

Текст, отсутствующий в Div

ответ

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