jQuery metni gizle, üzerine gelindiğinde görüntüleniyor mu?

Question

Umarım sadece kısa bir soru :)

Ben bu konuda yardımcı olacaktır küçük jQuery yazmaya çalışıyorum: sayfada görüntülenen

• metni: Fare tuttuysa
• metin görüntülenir CA: CALIFORNIA

Maalesef bunu yanlış bir şekilde yapmayı başardım. Biliyorum .hide() işlevini kullanmam gerekiyor, ancak bunu nasıl kullanacağımı anlayamıyorum. Üzgünüm, jQuery’ye yeni geliyorum ve sadece kafamı karıştırmaya çalışıyorum.

Burada bir jfiddle yaptım link, tercihen metin sağdan kayardı. Bir yay kullanmayı denedim ama farklı div'larda p etiketlerine sahip olmak daha iyi görünüyordu. CA ve LIFORNIA arasındaki küçük alandan kurtulmak için HTML'yi tek bir satıra koymam gerektiğini anlıyorum. belki yardım edebilir misiniz?

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

çok teşekkür ederiz!

Answer 1

ince çalışacak vardı kod, sadece HTML ve CSS daha anlamsal yapmak için biraz değiştirmeniz gerekir. Bu deneyin: Sana sayfasında bu birden fazla zorunda gidiyoruz varsayalım gibi seçicinin bir bağlam eklendi

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

Not söyledi.

Example fiddle

Answer 2

bu deneyin:

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

Umarım yardımcı olur :)