如何在文本上懸停時「縮放和旋轉圖像」？

我創建了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 
    }

非常感謝！ :)）

來源

2017-04-25 N1njaWTF

只需要你的懸停CSS規則改成這樣：

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

把懸停事件的容器和CSS應用到子！編輯：更新小提琴：https://jsfiddle.net/o5sxhssv/1/

來源

2017-04-25 18:23:22 philr

非常感謝！像一個魅力:)）不認爲這是很容易哈哈 – N1njaWTF

試試這個，錨標記容器文本和圖像，讓你想上懸停：

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

來源

2017-04-25 18:23:38 Benneb10

您可以在.category_images_item span

使用pointer-events: none使用pointer-events: none表示遊標不與該元素交互。

然後，爲了使整個區域可點擊，將a元素顯示爲塊，這將使得a覆蓋它的父元素的整個區域。

.category_images_item a { 
    display: block; 
}

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

來源

2017-04-25 18:24:39

如果你只是想改變的標記，那麼你可以重新安排這樣的代碼：

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

來源

2017-04-25 18:29:12 Reto

如何在文本上懸停時「縮放和旋轉圖像」？

回答

相關問題