Jquery Fadein 似乎在推低 div，在隱藏的 div 中淡出之后。解決這個問題的最佳方法是什么？我已經閱讀了一些舊的解決方案，但它們沒有幫助。我還嘗試洗掉 div 類（我想要隱藏的 div 類，當它淡入時），但這似乎也沒有幫助。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="itemWithin">
<div class="hiddenOne">
<h2 class="center2">Mining & Resources</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Mining & Resources</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin2">
<div class="hiddenOne">
<h2 class="center2">Defence</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Defence</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin3">
<div class="hiddenOne">
<h2 class="center2">Energy & Water</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Energy & Water</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin4">
<div class="hiddenOne">
<h2 class="center2">Public & Private Infrastucture</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Public & Private Infrastucture</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin5">
<div class="hiddenOne">
<h2 class="center2">Commercial & Residential Building</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Commercial & Residential Building</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin6">
<div class="hiddenOne">
<h2 class="center2">Industrial Manufacturing</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Industrial Manufacturing</h2>
<button class="button">View More</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis{
text-align: center;
margin-top:20px;
}
.center2{
text-align: center;
background-color:red;
}
.container{
margin-top: 20px;
display: flex; /* establish flex container */
flex-wrap: wrap; /* enable flex items to wrap */
justify-content: space-around;
}
.button{
background: red;
color: white;
padding:10px;
}
.buttonTwo{
background: red;
color: white;
padding:10px;
}
.buttonThree{
background: red;
color: white;
padding:10px;
}
.buttonFour{
background: red;
color: white;
padding:10px;
}
.buttonFive{
background: red;
color: white;
padding:10px;
}
.buttonSix{
background: red;
color: white;
padding:10px;
}
.white{
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne{
height:300px;
padding-top: 20px;
background-color: red;
color: white;
}
.itemWithin{
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
.itemWithin2{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin3{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin4{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin5{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin6{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
JavaScript/Jquery
$(document).ready(function () {
$(".hiddenOne").hide();
$(".button").hover(function () {
$(this).parent().find('.hiddenOne').fadeIn("slow");
})
$(".hiddenOne").mouseleave(function () {
$(this).fadeOut("slow");
})
});
uj5u.com熱心網友回復：
將hiddenOne類更改為：
.hiddenOne{
height:300px;
padding-top: 20px;
background-color: red;
color: white;
position: absolute;
width:100%;
}
并添加這個類
.container > div{
position:relative;
}
完整代碼
$(document).ready(function() {
$(".hiddenOne").hide();
$(".button").hover(function() {
$(this).parent().find('.hiddenOne').fadeIn("slow");
})
$(".hiddenOne").mouseleave(function() {
$(this).fadeOut("slow");
})
});* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis {
text-align: center;
margin-top: 20px;
}
.center2 {
text-align: center;
background-color: red;
}
.container {
margin-top: 20px;
display: flex;
/* establish flex container */
flex-wrap: wrap;
/* enable flex items to wrap */
justify-content: space-around;
}
.button {
background: red;
color: white;
padding: 10px;
}
.buttonTwo {
background: red;
color: white;
padding: 10px;
}
.buttonThree {
background: red;
color: white;
padding: 10px;
}
.buttonFour {
background: red;
color: white;
padding: 10px;
}
.buttonFive {
background: red;
color: white;
padding: 10px;
}
.buttonSix {
background: red;
color: white;
padding: 10px;
}
.white {
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne {
height: 300px;
padding-top: 20px;
background-color: red;
color: white;
position: absolute;
width: 100%;
}
.itemWithin {
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
.itemWithin2 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin3 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin4 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin5 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin6 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.container>div {
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<div class="container">
<div class="itemWithin">
<div class="hiddenOne">
<h2 class="center2">Mining & Resources</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Mining & Resources</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin2">
<div class="hiddenOne">
<h2 class="center2">Defence</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Defence</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin3">
<div class="hiddenOne">
<h2 class="center2">Energy & Water</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Energy & Water</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin4">
<div class="hiddenOne">
<h2 class="center2">Public & Private Infrastucture</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Public & Private Infrastucture</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin5">
<div class="hiddenOne">
<h2 class="center2">Commercial & Residential Building</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Commercial & Residential Building</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin6">
<div class="hiddenOne">
<h2 class="center2">Industrial Manufacturing</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Industrial Manufacturing</h2>
<button class="button">View More</button>
</div>
</div>
<script src="app.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/379772.html
標籤：javascript html 查询 css