jQuery ukryj tekst, wyświetlaj na hover?

Question

Mam nadzieję, że tylko szybkie pytanie :)

Próbuję napisać trochę jQuery, które pomogą to zrobić:

• tekst wyświetlany na stronie: CA
• tekst wyświetlany, gdy unosi się mysz: CALIFORNIA

Udało mi się zrobić to w niewłaściwy sposób, niestety, wiem, że potrzebuję użyć funkcji .hide(), ale po prostu nie mogę wymyślić, jak z niej korzystać. Przykro mi, że jestem całkiem nowy w jQuery i próbuję to zrozumieć.

Oto jfiddle zrobiłem link, najlepiej tekst zostanie przesunięty z prawej strony. Próbowałem używać rozpiętości, ale wydawało się, że lepiej będzie mieć p znaczniki w różnych elementach div. Rozumiem, że będę musiał umieścić kod HTML w jednym wierszu, aby pozbyć się małej przestrzeni między CA i LIFORNIA. Czy ktokolwiek może nam pomóc?

HTML:

<div class="state"> 
    <p>CA</p> 
</div> 
<div class="state-full"> 
    <p>LIFORNIA</p> 
</div> 

CSS:

.state, .state-full { 
    display: inline-block; 
    cursor: pointer; 
} 

jQuery:

$('.state').hover(function() { 
    $('.state-full').slideToggle(100, 'linear'); 
    $('.state-full').display(100, 'linear'); 
}); 

Dziękujemy!

Answer 1

Kod miałeś będzie działać dobrze, wystarczy zmodyfikować kod HTML i CSS trochę aby uczynić go bardziej semantyczny. Spróbuj tego:

<div class="state">  
    <span>CA</span> 
    <span class="state-full">LIFORNIA</span> 
</div> 

.state, .state-full { cursor: pointer; } 
.state-full { display: none; } 
.state span { float: left; } 

$('.state').hover(function() { 
    $('.state-full', this).slideToggle(100, 'linear').display(100, 'linear'); 
}); 

Zauważ, że dodałem kontekst do selektora jak zakładam, że będziemy mieć więcej niż jeden z nich na stronie.

Example fiddle

Answer 2

Spróbuj tego:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.state').mouseenter(function() { 
      $(this).html("CALIFORNIA"); 
     }); 
     $('.state').mouseleave(function() { 
      $(this).html("CA"); 
     }); 
    }); 
</script> 

Nadzieja to pomaga :)