gpt4 book ai didi

javascript - 使用 JavaScript 缩放每个图像

转载 作者:行者123 更新时间:2023-11-28 17:57:00 26 4
gpt4 key购买 nike

我有一个主 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com