Jquery Mouse Overs

Question

저는 메뉴를 만들 때 요소를 가리 키지 않을 때마다 표시 할 위치를 나타내는 표시기가 필요합니다.

<div id="menu"> 

    <div id="cutelo"><img src="wp-content/themes/PAA/cutelo.png" width="30px" height="9px" /></div> 
    <div id="linha01" class="linha">Festival <div class="mais">+</div></div> 
     <div id="submenu01" class="submenu"> 
      <div id="submenu01_linha01" class="linha"> 

       <a href="<?php echo get_permalink(35); ?>">Apresentação</a> 

      </div> 


      <div id="submenu01_linha02" class="linha"> 

       <a href="<?php echo get_permalink(37); ?>">Homenagens</a> 

      </div> 


      <div id="submenu01_linha03" class="linha"> 

       <a href="<?php echo get_permalink(41); ?>">Como Participar</a> 

      </div> 



      <div id="submenu01_linha04" class="linha"> 

       <a href="<?php echo get_permalink(43); ?>">Regulamento</a> 

      </div>   



      <div id="submenu01_linha05" class="linha"> 

       <a href="<?php echo get_permalink(39); ?>">Júris</a> 

      </div> 
     </div> 

    <div id="linha02" class="linha">Secção 2014 <div class="mais">+</div></div> 

     <div id="submenu02" class="submenu"> 
      <div id="submenu02_linha02" class="linha"> 

       <a href="<?php echo get_permalink(35); ?>">Apresentação</a> 

      </div> 


      <div id="submenu01_linha02" class="linha"> 

       <a href="<?php echo get_permalink(37); ?>">Homenagens</a> 

      </div> 


      <div id="submenu01_linha03" class="linha"> 

       <a href="<?php echo get_permalink(41); ?>">Como Participar</a> 

      </div> 



      <div id="submenu01_linha04" class="linha"> 

       <a href="<?php echo get_permalink(43); ?>">Regulamento</a> 

      </div>   



      <div id="submenu01_linha05" class="linha"> 

       <a href="<?php echo get_permalink(39); ?>">Júris</a> 

      </div> 
     </div> 
    <div id="linha03" class="linha">Notícias</div> 
    <div id="linha05" class="linha">OPorto</div> 
    <div id="linha06" class="linha">Premiados</div> 
    <div id="linha07" class="linha">Newsletter</div> 
    <div id="linha08" class="linha">Sobre o Fantas</div> 
    <div id="linha09" class="linha">Contactos</div> 





    </div> 

그리고 여기 jQuery의 : 내가 이것에 대한 기본 코드가 FIDDLE!

Answer 1

:

$(document).ready(function() { 
$('#cutelo').hide(); 

//When the Image is hovered upon, show the hidden div using Mouseover 
$('.linha').mouseover(function() { 
$('#cutelo').show(); 
}); 

//When the Image is hovered away from, hide the div using Mouseout 
$('.linha').mouseout(function() { 
$('#cutelo').hide(); 
}); 

}); 

그러나 이것은 단지 그것을 하나 개의 요소에 표시하게, 여기를 보여주는 바이올린입니다 매번 표시되고 보이지 않는 고정 div이 있기 때문에 표시되지 않습니다. 칼 위에 마우스를 올려 놓을 때마다 div를 추가하고 마우스를 떼어 내면 동적으로 제거해야합니다.

다음 코드는 작동합니다 :

//When the Image is hovered upon, show the hidden div using Mouseover 
$('.linha').mouseover(function() { 
    $(this).before('<div id="cutelo"><img src="https://www.essr.net/cdcomunicacao/al5580/PAA/wp-content/themes/PAA/cutelo.png" width="30px" height="9px" /></div>') 
//$('#cutelo').show(); 
}); 

//When the Image is hovered away from, hide the div using Mouseout 
$('.linha').mouseout(function() { 
    $(this).prev().remove(); 
}); 

Edited JSFIDDLE here

Answer 2

하는 당신은 클래스 cutelo하고 다음 호버에 표시 할 각 항목 전에 해당 이미지에 삽입해야 -

$('.cutelo').hide(); 

//When the Image is hovered upon, show the hidden div using Mouseover 
$('.linha').mouseover(function() { 
    $(this).prev('.cutelo').show(); 
}); 

//When the Image is hovered away from, hide the div using Mouseout 
$('.linha').mouseout(function() { 
    $(this).prev('.cutelo').hide(); 
}); 

을

이미지 div를 추가하면 다음과 같이 표시됩니다. - http://jsfiddle.net/jayblanchard/qkauC/2/

또한 마크 업이 @srinaik2020이 수행 한 마크 업 (cleaner)이되도록 이미지로 div를 추가하고 제거하여이 작업을 수행 할 수 있습니다.