Question

这是我的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>

我想制作：将鼠标悬停在我的.logo div上，这个div会在h2元素上使用缩放比例，就像这个一样。

.logo img:hover {
  transform: scale(1.2);
  transition: all .9s ease-in-out;
}

我无法在gogole中找到任何CSS解决方案

Answer 1

您需要更改HTML结构。您需要<img>和<h2>的公共容器。

当容器上的hover时，您可以更改其后代元素的样式。

HTML：

＆＃13;

h2 {
  font-size: 1em;
}
.logo {
  background: yellow;
  width: 200px;
}
/* On hover of image change the styles of image and h2 */

.logo:hover img,
.logo:hover h2 {
  transform: scale(1.2);
  transition: all .9s ease-in-out;
}

＆＃13;

<div class="col-sm-4">
  <div class="img">
    <img src="3.jpg" alt="" />
    <div class="logo tx">
      <img src="logo1.png" alt="SQM Digital Signage">
      <h2>Instalacja multimedialna</h2>
    </div>
  </div>
</div>

＆＃13;

Answer 2

代码检查您是否将鼠标悬停在.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>

Css：悬停在另一个元素上

2 个答案: