的jQuery的mouseenter /離開

我有這個代碼的html：的jQuery的mouseenter /離開

<div class="sub-status"> 
    <p class="subscribed"><i class="icon-check"></i> Subscribed</p> 
</div>

懸停時，我想，要改爲：

<div class="sub-status"> 
    <p class="unsubscribe"><i>X</i> Unsubscribe</p> 
</div>

而且，我有這樣的代碼jQuery中：

$(document).ready(function() { 
    $('.sub-status').mouseenter(function() { 
     $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); 
    }); 
    $('.sub-status').mouseleave(function() { 
     $('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); 
    }); 
});

第一個功能運行良好。當我將鼠標懸停在div上時，它會變成我想要的，但mouseleave不起作用。我希望當我將鼠標移出該div時，其數據將恢復到之前的狀態。我無法得到這個工作。任何幫助，將不勝感激。

謝謝。

來源

2013-06-24 Amar Syla

這裏，試試這個。工作演示：http://jsfiddle.net/XrYj4/3/

$(document).ready(function() { 
    $('.sub-status').on("mouseenter", function() { 
     $(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe"); 
    }).on("mouseleave", function() { 
     $(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed"); 
    }); 
});

來源

2013-06-24 13:28:44 smerny

謝謝，這就是我一直在尋找的。我只是將UNSUBSCRIBED類更改爲UNSUBSCRIBE並且非常好。非常感謝。 –

變化

$('this')...

到

$(this)...

和u可以使用hover()而不是使用兩個不同的功能

$('.sub-status').hover(function() { 
    $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); 
},function() { 
    $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); 
});

更新

由於您正在更新懸停元素的全部內容，因此您的小提琴不能正常工作......只更新<p>中的文本應該可以正常工作。

$('.sub-status').hover(function() { 
    $(this).children('p') 
       .removeClass() 
       .addClass('unsubscribed') 
       .html("<i>X</i> Unsubscribe"); 
    },function() { 
    $(this).children('p') 
       .removeClass() 
       .addClass('subscribed') 
       .html("<i class='icon-check'></i> Subscribed"); 
});

working fiddle

來源

2013-06-24 13:16:24 bipen

我不鼓勵使用懸停（），因爲觸發執行的一個瘋狂的量，這是沒有必要在這種情況下。 –

不工作http://jsfiddle.net/XrYj4/ – smerny

'瘋狂的執行量......「？你能解釋一下嗎？ – bipen

嘗試使用懸停功能：

$(".sub-status").hover(
    function() { 
    $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); 
    }, 
    function() { 
    $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); 
    } 
);

http://api.jquery.com/hover/

來源

2013-06-24 13:17:04

它不再工作。我得到同樣的效果。文字在mouseenter上發生變化，但不在我離開後。 –

變化'this'簡單this。另外考慮鏈接，如下所示，這可以幫助用戶使用較弱的設備更快速地加載內容。

$(document).ready(function() { 
    $('.sub-status').mouseenter(function() { 
     $(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>"); 
    }).mouseleave(function() { 
     $(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>"); 
    }); 
});

來源

2013-06-24 13:17:54

這並不能解決問題，http://jsfiddle.net/XrYj4/4/ – smerny

@smerny真的很奇怪 –

的jQuery的mouseenter /離開

回答

相關問題