Question

我创建了jsfiddle，向您展示我的意思。

当将鼠标悬停在文本上时，背景也可能会像悬停在img / div上时那样产生效果。目前悬停效果仅在将鼠标悬停在div / img上时有效，而不是悬停在图像中间的文本上时。“a”链接应该对div和文本起作用。

HTML：

<!--First image-->

<div class="category_images_item">
<a href="">
<span>Watches</span>

<div class="category_images_img" style="background:url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">

</div>
</a>
</div>
</div>

CSS：

.category_images{
 margin: 0 auto
 }
 .category_images_item{
  width: 400px;
  height: 400px;
  position: relative;
  background-color: black;
  overflow: hidden;
  transition: all .8s ease;
  margin: 10px;float: left
  }
  .category_images_item span{
   color: white;
   font-weight: bold;
   font-size: 50px;
   font-style: italic;
   z-index: 100;
   position: absolute;
   width: 100%;
   text-align: center;
   top: 150px
   }
.category_images_img{
 background-size: cover;
 width: 400px;
 height: 400px;
 transition: all .8s ease;
 opacity: 0.7
 }
 .category_images_img:hover{
  transform: scale(1.03) rotate(-1deg);
  opacity: 0.5
  }

非常感谢!! ：））

Answer 1

只需将您的悬停css规则更改为：

.category_images_item:hover .category_images_img{
    transform: scale(1.03) rotate(-1deg);
    opacity: 0.5
 }

将悬停事件放在容器上并将css应用于孩子！编辑：更新小提琴：https://jsfiddle.net/o5sxhssv/1/

Answer 2

试试这个，锚标记容器文本和图像，所以你想悬停在那个：

.category_images_item a:hover .category_images_img{
   transform: scale(1.03) rotate(-1deg);
   opacity: 0.5
}

Answer 3

您可以在pointer-events: none

上使用.category_images_item span

使用pointer-events: none表示光标不与该元素交互。

然后，为了使整个区域可以点击，将一个元素显示为一个块，这将使一个覆盖它的父元素的整个区域。

.category_images_item a {
  display: block;
}

https://jsfiddle.net/o5sxhssv/2/

Answer 4

如果您只想更改标记，则可以重新排列代码，如下所示：

    <div class="category_images">

    <!--First image-->

        <div class="category_images_item">
          <a href="">

             <div class="category_images_img" style="background:url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
             <span>Watches</span></div> 
          </a> 
        </div> 
    </div>

https://jsfiddle.net/tung3yx2/

悬停在文本上时如何“缩放和旋转图像”？

4 个答案: