【发布时间】：2022-01-16 16:18:57
【问题描述】：
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");
})
});
【问题讨论】：
标签： javascript html jquery css