悬停样式不是't应用于复制的HTML

Hover style isn't applied to copied HTML

本文关键字：应用于 复制 HTML 样式 悬停      更新时间：2023-09-26

我想添加一个节点，我成功了，但我没有将节点的悬停功能复制到我的应用程序中。悬停没有什么可做的。我想用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());
});

您只复制#addedCell的内容，而不是其类等-因此您复制的内容没有.btnStyle类。考虑克隆整个div，然后取消隐藏：

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

请注意，我们还删除了克隆元素的id，因为ID在文档中必须是唯一的。

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

相关文章：