我有一個隱藏類fadeThis，當我將滑鼠懸停在按鈕上時它不會出現。也許它與另一個類/div 沖突？
我本質上想做的是在灰色框上創建一個紅色淡入淡出，當游標懸停在按鈕上時，然后當游標離開框（不是按鈕）時，我希望它回傳到原來的狀態狀態。
我還添加了 CSS 來幫助演示
HTML
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
CSS
.imageOne{
height: 300px;
width: 400px;
background-color: grey;
}
.centerButton{
display: flex;
justify-content:center;
padding-top:150px;
}
.btn{
height: 30px;
width:170px;
}
.onClickThis{
height: 300px;
width: 400px;
background-color: tomato;
}
JavaScript
$(document).ready(function () {
$(".onClickThis").hide();
$(".fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(this).addClass("fadeThis onClickThis");
$(".btn").remove();
});
$(".onClickThis").mouseleave(function () {
$(this).removeClass("fadeThis onClickThis");
});
});
});
uj5u.com熱心網友回復：
我不明白你在找什么。也許你可以提供更多細節。
這是從您的代碼開始的演示，其中添加了一些更改。
$(document).ready(function () {
$(".onClickThis, .fadeThis").hide();
$(".btn").hover(function () {
$(".imageOne").fadeIn("slow", function () {
$(".onClickThis, .fadeThis").fadeIn( 250 );
$(".btn").fadeOut();
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="imageOne">
<div class="onClickThis"> <!-- hidden by default-->
<h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
</div>
<div class="centerButton">
<button class="btn">View More</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/378721.html
標籤：javascript html 查询
上一篇：es6類從元素中查找陣列物件類
下一篇：jQuery信用卡輸入格式