CSS：將鼠標懸停在另一個元素上

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制作：hover，它將像這樣在h2元素上按比例縮放。

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

我在gogole的CSS中找不到任何解決方案

Answer 1

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

將hover在容器上時，可以更改其后代元素的樣式。

HTML：

 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; } 

 <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> 

Answer 2

代碼檢查您是否將.logo懸停在.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>