jQuery Mouse Overs

Question

I am creating a menu in which I want an indicator of where I am to show whenever I mouseover hover an element; I have a basic code for this:

<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>

And here's the jQuery:

$(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();
}); 

});

But this only makes it show on one element, here is a Fiddle to show it: FIDDLE!

Answer 1

It is not showing up because you have a static div that becomes visible and invisible each time. You will have to add the div with the knife each time you hover over it and dynamically remove it when it is hovered out from.

The following code should work :

//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

You have to make cutelo a class and then insert that image before each item that you want to display it on hover -

$('.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();
});

Here is what it should look like after you add the image div's - http://jsfiddle.net/jayblanchard/qkauC/2/

You can also do this by adding and removing the div with the image so that your markup is cleaner which is what @srinaik2020 has done.