我有一个主 div，下面有三个不同的 div，每个子 div 包含图像和文本。每当我将鼠标悬停在该子 div 上时，我想将该特定子 div 的图像缩放到比例(1.1)。现在，当我将鼠标悬停在任何子 div 上时，所有子 div 的所有三个图像都会缩放。
我的代码的html是
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="...">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>abz</p>
</div>
</div>
jquery 是
$(".sub-div").each(function(){
$(this).hover(function(){
$('.img').css('transform','scale(1.1)');
},function(){
$('.img').css('transform','scale(1.0)');
});
});
最佳答案
如果您绝对必须使用 Javascript，请使用选择器 this :
$(".sub-div").hover(function(){
$('.img',this).css('transform','scale(1.1)');
},function(){
$('.img',this).css('transform','scale(1.0)');
});
但是你可以用 CSS 做同样的事情:
.sub-div:hover .img{
transform: scale(1.1);
}
在这里工作 JSFiddle : https://jsfiddle.net/26zdf038/
关于javascript - 使用 JavaScript 缩放每个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44257790/