jQuery ẩn văn bản, hiển thị khi di chuột?

Question

Hy vọng chỉ là một câu hỏi nhanh :)

Tôi đang cố gắng để viết ít jQuery sẽ giúp thực hiện điều này:

• văn bản hiển thị trên trang: CA
• text hiển thị khi di chuột: CALIFORNIA

Tôi đã cố gắng làm điều này một cách sai lầm không may, tôi biết mình cần sử dụng hàm .hide() nhưng tôi không thể tìm ra cách sử dụng nó. Xin lỗi tôi là khá mới với jQuery và chỉ cố gắng để có được đầu của tôi vòng nó.

Đây là một jfiddle tôi đã thực hiện link, tốt hơn là văn bản sẽ trượt từ bên phải. Tôi đã thử sử dụng một khoảng nhưng nó dường như làm việc tốt hơn có thẻ p trong divs khác nhau. Tôi hiểu rằng tôi sẽ cần phải đặt tất cả HTML trên một dòng để loại bỏ không gian nhỏ giữa CA và LIFORNIA. bất cứ ai có thể vui lòng hỗ trợ?

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

Rất cám ơn!

Answer 1

Mã bạn có thể làm việc tốt, bạn chỉ cần phải sửa đổi HTML và CSS một chút để làm cho nó nhiều ngữ nghĩa của bạn. Hãy thử điều này:

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

Lưu ý rằng tôi đã thêm một ngữ cảnh để chọn như tôi giả sử bạn đang đi để có nhiều hơn một trong những trên trang.

Example fiddle

Answer 2

Hãy thử điều này:

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

Hy vọng nó sẽ giúp :)