我的目標如下：
我有多個包含影像的 div 元素（類 = 父級）。只有當用戶將滑鼠游標放在相應的 div 元素中時，影像才應該可見。另外，我想在滑鼠游標在div中且圖片可見的情況下放大圖片。
我的想法是在相應的 div 元素中創建一個子元素。在 mouseenter 上，子元素設定為 display = 'none'。在 mouseleave 時，子元素設定為 display = 'block.
我想要實作的是，用戶只能在將滑鼠游標定位在相應元素上時才能看到父 div。在下面的代碼中，parent-div 是綠色的，而 child-div 是灰色的。因此，當用戶將滑鼠移到其中一個元素上時，灰色的 child-div 應該會消失，而 parent div-應該會變得可見。因此，當用戶將滑鼠放在元素中時，此特定代碼中元素的顏色應從灰色變為綠色。
我假設我犯了一個非常基本的錯誤。
謝謝你的幫助。
$('#child_1').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$('#child_2').mouseenter(function(event) {
let target = event.target;
target.style.display = 'none';
})
.mouseleave(function(event) {
let target = event.target;
target.style.display = 'block'
});
$(document).ready(function() {
$("[id^=parent]").hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});.transition {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.child {
background: grey;
width: 100%;
height: 100%;
position: absolute;
box-shadow: inset 0 0 20px #fff;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
.parent {
background: darkolivegreen;
width: 300px;
height: 424px;
position: relative;
float: left;
margin: 30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent_1" class="parent">
<div id="child_1" class="child"></div>
</div>
<div id="parent_2" class="parent">
<div id="child_2" class="child"></div>
</div>uj5u.com熱心網友回復：
我剛剛創建了這個 CodePen。這是你要找的嗎？
我已經簡化了您的 JavaScript，因此當您翻轉父 div 時，它只會添加/洗掉一個“活動”類：
$('.img-wrapper').mouseenter(function(event) {
$(this).addClass('active');
})
$('.img-wrapper').mouseleave(function(event) {
$(this).removeClass('active');
});
影片在css中處理：
.img-wrapper {
overflow: hidden;
background: lightblue;
width: 300px;
height: 300px;
position: relative;
margin: 0 10px;
}
.img-wrapper img {
opacity: 1;
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
transition: all .4s ease-in-out;
}
.img-wrapper.active img {
opacity: 0;
transform: translate(-50%, -50%) scale(1.25);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411378.html
標籤：
上一篇：移動設備的CSS媒體查詢不適用
下一篇：在1行中顯示表格