将鼠标悬停在文本上时如何“缩放和旋转图像”？答案

【问题标题】：How to "scale and rotate image" when hovering over text aswell?将鼠标悬停在文本上时如何“缩放和旋转图像”？
【发布时间】：2017-04-25 18:19:12
【问题描述】：

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

当悬停在文本上时，背景也应该有可能像悬停在 img/div 上时一样。目前，悬停效果仅在悬停在 div/img 上时有效，而在悬停在图像中间的文本上时无效。“a”链接也应在 div 和文本上工作。

https://jsfiddle.net/o5sxhssv/

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
  }

非常感谢！！ :))

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

非常感谢！！像魅力一样工作:)）没想到那么容易哈哈

【解决方案2】：

试试这个，锚标签同时包含文本和图像，所以你希望将鼠标悬停在上面：

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

【讨论】：

【解决方案3】：

你可以在.category_images_item span上使用pointer-events: none

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

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

.category_images_item a {
  display: block;
}

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

【讨论】：

【解决方案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/

【讨论】：