jQuery隱藏文字，懸停時顯示？

我想寫一點jQuery的，這將有助於做到這一點：網頁上顯示

文字：CA當鼠標懸停
文本顯示：CALIFORNIA

不幸的是，我設法做到了這個錯誤的方式，我知道我需要使用.hide（）函數，但我無法弄清楚如何使用它。對不起，我對jQuery非常陌生，只是試圖讓我的頭轉過來。

這裏是一個jfiddle我做了link，最好是文字從右側滑入。我試過使用跨度，但它似乎更好地在不同的div中使用p標籤。我知道我需要將HTML全部放在一行上，以擺脫CA和LIFORNIA之間的小空間。任何人都可能請協助？

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

非常感謝！

來源

2012-12-07 LT86

你不得不將做工精細的代碼，你只需要修改你的HTML和CSS一點點，使其更加語義。試試這個：

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

注意，我添加了一個上下文選擇，因爲我認爲你將不得不對這些頁面上的不止一個。

Example fiddle

來源

2012-12-07 11:18:20

非常感謝的傢伙，非常感謝。他們都工作得很好，但我最終與@ Rory的答案一致，因爲這意味着我可以做多個'狀態'div，而無需一遍又一遍地重複jquery。我相信他們都會派上用場！ :) – LT86

試試這個：

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

希望它能幫助:)

來源

2012-12-07 11:08:17 Fahad

jQuery隱藏文字，懸停時顯示？

回答

相關問題