我想要当用户将鼠标悬停在图像或文本和图像比例上时。我试过这个但只有一个比例
.top3 , .top1 {
transition: all 1s ease;
}
.top3:hover ,.top1:hover {
transform: scale(1.17);
}
<div class="top3" id="DSC0123"><a href=""><img src="images/DSC0123.png"></a></div>
<div class="top3" id="Layer4"><a href=""><img src="images/Layer4.png"></a></div>
<div class="top3" id="DSC0416"><a href=""><img src="images/DSC0416.png"></a></div>
<div class="top3" id="IMG0541"><a href=""><img src="images/IMG0541.png"></a></div>
<div class="top3 top3" id="DSC0331"><a href=""><img src="images/DSC03311.png"></a></div>
<div class="top1 top3" id="Food"><a href="">Food</a></div>
<div class="top1 top3" id="portrait"><a href="">Food</a></div>
<div class="top1 top3" id="LANSCAPES"><a href="">Food</a></div>
<div class="top1 top3" id="kids"><a href="">Food</a></div>
<div class="top1 top3" id="SPORTS"><a href="">Food</a></div>
最佳答案
使用 display
在 <a>
并将鼠标悬停在 <a>
上,比如:
.top3 , .top1 {
transition: all 1s ease;
}
.top3 a, .top1 a {
display: inline-block;
transition: all 1s ease;
}
.top3:hover a ,.top1:hover a {
transform: scale(1.17);
transform-origin: center;
}
看看下面的片段:
.top3 , .top1 {
transition: all 1s ease;
}
.top3 a, .top1 a {
display: inline-block;
transition: all 1s ease;
}
.top3 a:hover ,.top1 a:hover {
transform: scale(1.5);
transform-origin: center;
}
<div class="top3" id="DSC0123"><a href=""><img src="images/DSC0123.png"></a></div>
<div class="top3" id="Layer4"><a href=""><img src="images/Layer4.png"></a></div>
<div class="top3" id="DSC0416"><a href=""><img src="images/DSC0416.png"></a></div>
<div class="top3" id="IMG0541"><a href=""><img src="images/IMG0541.png"></a></div>
<div class="top3 top3" id="DSC0331"><a href=""><img src="images/DSC03311.png"></a></div>
<div class="top1 top3" id="Food"><a href="">Food</a></div>
<div class="top1 top3" id="portrait"><a href="">Food</a></div>
<div class="top1 top3" id="LANSCAPES"><a href="">Food</a></div>
<div class="top1 top3" id="kids"><a href="">Food</a></div>
<div class="top1 top3" id="SPORTS"><a href="">Food</a></div>
希望这对您有所帮助!
关于html - 当悬停在图像或文本上时,两者都会缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41341527/