Question

我正在链接上进行鼠标悬停事件。

我能够实现div的显示和隐藏。但如果需要进行编辑，则无法保留。

HTML

<div id='content'>
    <div id='login_div'>        
        <a href="#" id='loginid' class="Login_link">Login</a>
    </div>

    <div>
            <input id='searchdiv' type='text' placeholder='search'/>
    </div>

    <div id='loginpass' class='arrow_box'>

        <span>hi kp</span>

    </div>

 </div>

CSS

.arrow_box { position: relative; background: #3E64AF; border: 4px solid #FFFFFF; } .arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(36, 89, 213, 0); border-bottom-color: #3E64AF; border-width: 20px; margin-left: -20px; } .arrow_box:before { border-color: rgba(54, 67, 245, 0); border-bottom-color: #FFFFFF; border-width: 26px; margin-left: -26px; }

 #loginpass{visibility:hidden;position: fixed;top: 50px;left: 140px;width: 25%; height: 30%;}

#login_div{position: fixed;top: 17px;left: 180px;}

.Login_link {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
background:-moz-linear-gradient( center top, #3E64AF 5%, #3E64AF 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
background-color:#3E64AF;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #469df5;
display:inline-block;
color:#ffffff;
font-family:Times New Roman;
font-size:15px;
font-weight:bold;
font-style:normal;
height:24px;
line-height:24px;
width:47px;
text-decoration:none;
text-align:center;

}
.Login_link:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
background-color:#4197ee;
}
.Login_link:active {
position:relative;
top:1px;
}

#content { width: 100%; height: 7%; background: #3E64AF;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px; }
#searchdiv {position: fixed;top: 17px;right: 600px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; width: 300px;}

如果要添加任何if文本框，如何保持div添加。

TIA。

Answer 1

这是你想要的吗？

$(document).ready(function () {
    $("#login_div").mouseenter(function () {
        var appendDiv = $("#loginpass").clone();

        // don't have multiple id's in same page.
        appendDiv.attr("id", "");

        var appendedDiv = appendDiv.appendTo(this);

        $(this).mouseleave(function () {
            appendedDiv.remove();
        });
    });
});

http://jsfiddle.net/8ewMV/7/

在鼠标悬停事件期间div不会保留

1 个答案: