悬停样式不适用于复制的HTML

时间:2014-09-04 13:32:33

标签: javascript jquery html css

我想添加一个节点,我成功了,但是我没有将节点的悬停功能复制到我的应用程序。悬停没有任何关系。我想用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());
});

1 个答案:

答案 0 :(得分:4)

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

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

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

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