Alternare su hover div

Ho un test UL elenco che va come questa:

<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
....
</ul>

E, qui sotto, che mi hanno riferito div, aka:

<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>

Mi chiedevo come avrei potuto fare di ogni div mostra solo quando i suoi LI elemento è aleggiava, magari con qualche effetto fadein.
Ho provato con alcune altre risposte da qui, ma senza fortuna :\

  • ids deve essere univoco. Questo è l’importante.
  • Ci potete mostrare il javascript/jquery codice che hai provato?
  • Leggere la documentazione di jQuery per gli eventi del mouse: api.jquery.com/category/events/mouse-events
  • vedi la mia risposta e la prova, che è la risposta che si desidera. con fadeIn e FadeOut
InformationsquelleAutor Mariola | 2014-03-06

 

6 Replies
  1. 3

    Come ho già detto, è importante che il vostro ids sono unici. Quindi è necessario trovare un altro modo per fare riferimento a <div>s. Posso suggerire l’uso di data-* attributi:

    HTML

    <ul>
        <li data-id="firstdiv">First div</li>
        <li data-id="seconddiv">Second div</li>
        <li data-id="thirddiv">Third div</li>
    </ul>

    Poi jQuery potrebbe essere simile al seguente:

    $('ul li').on({
        'mouseenter':function(){
            $('#'+$(this).data('id')).fadeIn();
        },'mouseleave':function(){
            $('#'+$(this).data('id')).fadeOut();
        }
    });

    JSFiddle

    • O utilizzare @Felix soultion se non volete che l’effetto di dissolvenza.
    • Perché non usare hover e fadeToggle invece: jsfiddle.net/X2trY/1?
    • Questo è grande, ma di default sono aperto/ha mostrato. Avrei bisogno solo il primo ad essere aperto.In questo modo l’utente si posiziona su di qualche altro elemento, e la sua.Egli sposta il cursore di distanza, di nuovo, il primo appare
    • Che suona come un’altra domanda 😉
  2. 3

    Vedere questo violino.

    Anche mantenere un ID univoco.

    Ecco alcuni codici da il violino:

    $(document).ready(function() {
        $('ul>li').hover(function(){
            $('#d'+$(this).prop('id')).show();
        }, function() {
            $('#d'+$(this).prop('id')).hide();
        });
    });
  3. 1

    Chang tuo id di classe

    <ul>
    <li class="firstdiv">First div</li>
    <li class="seconddiv">Second div</li>
    <li class="thirddiv">Third div</li>
    </ul>
    
    <div class="firstdiv">Content 1 Here</div>
    <div class="seconddiv">Content 2 Here</div>
    <div class="thirddiv">Content 3 Here</div>

    si può usare:

    $('ul li').hover(function() {
        var cls = $(this).attr('class');
        $('div.'+cls).toggle();
    })

    Violino Demo

    • Se questi elementi dell’elenco di più di una classe?
    • Bene, questo è solo un esempio, giusto?
    • Certo, ma solo un pensiero. Non ho giù-voto, l’ho fatto?
    • Vai avanti e farlo, io non mente 🙂
    • utilizzare .hasClass meglio di verifica della classe di simile. api.jquery.com/hasClass
  4. 1

    Provare questo.

    codice html

    <ul>
    <li id="firstli">First div</li>
    <li id="secondli">Second div</li>
    <li id="thirdli">Third div</li>
    </ul>
    
    <div id="firstdiv">Content Here</div>
    <div id="seconddiv">Content Here</div>
    <div id="thirddiv">Content Here</div>

    javascript.

    $(document).ready(function(){
    
     $("#firstdiv").hide();
     $("#seconddiv").hide();
     $("#thirddiv").hide();
    
        $("#firstli").hover(function(){
          $("#firstdiv").show();
        });
        $("#secondli").hover(function(){
          $("#seconddiv").show();
        });
        $("#thirdli").hover(function(){
          $("#thirddiv").show();
        });
    }); 

    vedere di uscita: violino demo

  5. 0

    Si dovrebbe dare degli id univoci elementi

    <ul>
    <li id="firstdiv">First div</li>
    <li id="seconddiv">Second div</li>
    <li id="thirddiv">Third div</li>
    
    </ul>
    
    <div class="myclass" id="firstdiv1">Content1 Here</div>
    <div class="myclass" id="seconddiv1">Content2 Here</div>
    <div class="myclass" id="thirddiv1">Content3 Here</div>
    
    $(".myclass").hide();
    $("ul li").hover(function(){
    $(".myclass").hide();
    $("#"+this.id+1).show();
    });

    Demo

  6. 0

    Questa è la tua risposta

    <html>
    <head>
    <style>
    .hidden_div{
        display: none;
        position: absolute;
    }
    </style>
    <script src="script/jquery-1.10.2.js"></script>
    <script>
    $(document).ready(function(){
        $("li").mouseover(function(){
            var id=$(this).attr('id');
    
            $('.hidden_div').fadeOut();
            $("."+id).fadeIn();
        })
    
    });
    </script>
    </head>
    <body>
    <ul>
    <li id="firstdiv">First div</li>
    <li id="seconddiv">Second div</li>
    <li id="thirddiv">Third div</li>
    </ul>
    
    <div class="firstdiv hidden_div">Content 1</div>
    <div class="seconddiv hidden_div">Content 2</div>
    <div class="thirddiv hidden_div">Content 3</div>
    </body>
    </html>

    basta cambiare la posizione del vostro script

    • Posso scegli il tuo cervello con qualcosa d’altro? 🙂 Quando testato, funziona perfettamente, ma quando ho distribuirlo, isnt :\
    • funziona bene

Lascia un commento