这是我的html结构的一部分。
<div class="col-sm-4">
<div class="img">
<img src="3.jpg" alt="" />
<div class="logo">
<img src="logo1.png" alt="SQM Digital Signage">
</div>
<div class="tx">
<h2>Instalacja multimedialna</h2>
</div>
</div>
</div>
我想为我的.logodiv设置：hover ，它将h2像这样在具有比例的元素上工作。
.logo img:hover {
transform: scale(1.2);
transition: all .9s ease-in-out;
}
我在gogole的CSS中找不到任何解决方案
代码检查您是否将鼠标悬停在上面.logo。这样，您可以同时为两个动画。
.logo:hover > img, .logo:hover + .tx {
transform: scale(1.2);
transition: all .9s ease-in-out;
}<div class="col-sm-4">
<div class="img">
<img src="3.jpg" alt="" />
<div class="logo">
<img src="logo1.png" alt="SQM Digital Signage">
</div>
<div class="tx">
<h2>Instalacja multimedialna</h2>
</div>
</div>
</div>就像评论中所说的那样，如果您将鼠标悬停在上方，则将无法使用<h2>。取而代之的是，我们可以检查悬停.logo并将其动画化。
.img:hover > .logo, .img:hover > .tx {
transform: scale(1.2) translateX(54px);
transition: all .9s ease-in-out;
}<div class="col-sm-4">
<div class="img">
<img src="3.jpg" alt="" />
<div class="logo">
<img src="logo1.png" alt="SQM Digital Signage">
</div>
<div class="tx">
<h2>Instalacja multimedialna</h2>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句