<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
我正在研究链接上的鼠标悬停事件。
我能够实现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;}
如果添加了文本框，如何按住 div 以添加任何内容。
TIA。
最佳答案
这是你想要的吗？
$(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();
});
});
});
关于jquery - div 在鼠标悬停事件期间未保持，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24198367/