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：

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

});

但是这只会让它显示在一个元素上，这是一个小提琴来展示它：FIDDLE!

Answer 1

它没有显示，因为你有一个静态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/

你也可以通过在图片中添加和删除div来实现这一点，这样你的标记就更清晰了，这就是@ srinaik2020所做的。

Jquery Mouse Overs

2 个答案: