我有一個 div，當你懸停時，另一個 div 會出現。它們不是父/子或包裝的，所以我使用了一個腳本來讓它盡可能簡單地工作并獲得我需要的東西。隨著 .mouseover ，懸停 div 慢慢出現，這就是我想要的。我的問題是讓 .mouseout 使懸停 div 慢慢消失并保持消失。我嘗試過不同的變化，但最接近的是讓 div 慢慢消失，但在我設置的延遲后它會彈出。我對js很陌生，真的沒有任何經驗。我編寫了該代碼的第一部分，該代碼可以工作，但 .mouseout 是我遇到的問題。這是我的代碼：$("#show_stats1 h1").mouseover(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); });$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });我知道這可能很簡單，但我對 js 不太了解。這是 HTML：<div id="show_stats1" class="stats"> main, visible div</div><div class="stat-1_info" style="visibility:hidden;"> hidden div to be shown on hover</div>這是一個jsfiddle https://jsfiddle.net/yt3h9xnf/
1 回答
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
您可以將該.animate()方法與opacity或 一起使用visibility。沒有理由同時使用兩者。
$("#show_stats1 h1").mouseover(function() {?
? $(".stat-1_info").animate({opacity: 1}, 200);
});
$("#show_stats1 h1").mouseout(function() {?
? $(".stat-1_info").animate({opacity: 0}, 200);
});
.stat-1_info {
? opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="show_stats1" class="stats">
? ? <h1>main, visible div</h1>
</div>
<div class="stat-1_info">
? ? hidden div to be shown on hover
</div>
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
fadeIn()通過使用andfadeOut()作為sec參數使其變得簡單。這將照顧您想要看到文本并想要消失的時間。使用
display:none;現在市場上最新、最好的而不是使用visibility房產。
$(document).ready(function() {
$("#show_stats1 h1").mouseover(function() {
$(".stat-1_info").fadeIn(3000); // Choose your own time(3sec)
});
$("#show_stats1 h1").mouseout(function() {
$(".stat-1_info").fadeOut(2000); // Choose your own time(2sec)
});
});
.stats_container {
width: 310px;
padding: 10px;
margin-bottom: 0px;
}
.stats {
width: 300px;
height: 34px;
margin: 15px 0px -3px 0px;
}
.stats h1 {
text-align: left;
}
.stats h2 {
position: absolute;
left: 260px;
margin-top: 8px;
width: 50px;
text-align: right;
}
.stats h1 {
display: inline-block;
font-weight: 400;
color: #000;
line-height: 9.5pt;
font-size: 9.5pt;
}
.stat-1_info {
top: -50px;
margin: 0px;
}
.stat-1_info {
float: right;
position: relative;
left: 0px;
display: inline-block;
width: 380px;
height: 334px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stats_container">
<div id="show_stats1" class="stats">
<h1>Strength:</h1>
</div>
</div>
<div class="stat-1_info" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam
ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
</div>
- 1 回答
- 0 關注
- 236 瀏覽
添加回答
舉報
0/150
提交
取消