Question

当我将鼠标悬停在父div上时，我试图触发div悬停效果

<div class="card">
    <div class="photo-container">

        <img class="card-img-top img-fluid photo" src="img/jay.png" alt="Card image cap">
    </div>
    <div class="card-block">
        <h4 class="card-title">Jay Query</h4>
        <p class="card-text">
            Jay is a developer, author of CSS: The Missing Manual, JavaScript &amp; jQuery: The Missing Manual, and web development teacher.
        </p>
    </div>
</div>

CSS 当我将鼠标悬停在.card上时，我不会将鼠标悬停在活动状态。

.photo {
    transition: transform .5s;
    position: relative;
    overflow: hidden;

}

.photo:hover {
      -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.photo-container{
    position: relative;
    overflow: hidden;
}

.card:hover{
    //do .photo:hover 
}

谢谢

Answer 1

触发儿童悬停效果，如此

.card:hover .photo{
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Answer 2

您只能通过将鼠标悬停在父元素上来调用.photo:hover状态，但是您可以这样做：

.card:hover .photo {
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

Answer 3

您只需要在父级上使用:hover并将悬停样式提供给孩子。

.card:hover .photo {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

css悬停在一个元素上触发另一个元素？

3 个答案: