jQuery - 尝试交换p标签内的内容

Question

我正在尝试在鼠标悬停时交换一些内容 - 内容被替换为正常，但它会在之前添加关闭p标记并在之后打开p标记，使其不正确。这是js：

$( ".share" ).mouseover(function() {
  $( ".share" ).hide();
  $( "#share-post").css( "display", "inline-block");
});

$( ".share-post" ).mouseout(function() {
    $( "#share-post" ).hide();
    $( ".share").css( "display", "inline-block");
});

HTML：

<p>
    <span class="share">
        Share <i class="fa fa-share-square-o"></i>
    </span>
    <div id="share-post">
        <i class="fa fa-facebook-square fa-2x"></i>
        <i class="fa fa-twitter-square fa-2x"></i>
        <i class="fa fa-google-plus-square fa-2x"></i>
    </div>
</p>

当我鼠标悬停.share时，我得到以下渲染的HTML：

    <p>
        <span class="share" style="display: none;">
            Share <i class="fa fa-share-square-o"></i>
        </span>
        </p>
        <div id="share-post" style="display: inline-block;">
            <i class="fa fa-facebook-square fa-2x"></i>
            <i class="fa fa-twitter-square fa-2x"></i>
            <i class="fa fa-google-plus-square fa-2x"></i>
        </div>
    <p></p>

如何阻止它添加这些p标签？