懸停樣式不適用於複製的HTML

Question

我想添加一個節點，我成功了，但我沒有將該節點的懸停功能複製到我的應用程序。懸停沒有任何關係。我想運行與ie8。 這是我的html：

<div id="appendCell" style="color:green; color:red"> 
    <button>clickMe</button> 

</div> 

<div id="addedCell" class="btnStyle" style="display:none"> 
     clickBtn 
</div> 

這是我的CSS：

.btnStyle{ 
    width: 80px; 
    height: 20px; 
    background: orange; 

} 

.btnStyle:hover{ 
    cursor: pointer; 
} 

這是我的jQuery代碼：

$("#appendCell").find("button").click(function() { //當點擊後觸發 
    $(this).before($("#addedCell").html()); 
}); 

Answer 1

你只複製的#addedCell的內容，不是它的課程等 - 所以你複製的內容沒有.btnStyle類。考慮克隆整個DIV，然後取消隱藏它：

$("#appendCell").find("button").click(function() { 
    $(this).before(
    $("#addedCell").clone().removeAttr('id').show() 
); 
}); 

注意，我們還準備卸下克隆元素的id，因爲ID必須在文檔中是唯一的。

例子：http://codepen.io/paulroub/pen/uCnvD