在 css 懸停效果上，無法選擇/應用效果到特定元素？

Question

我有一個帶有 div 疊加層的圖像。 div 覆蓋出現在懸停時。 同樣在懸停時，我想要一個動畫效果。 問題是，動畫效果發生在圖像和疊加層上，但我不希望動畫效果發生在疊加層上。

此代碼有效，但我無法阻止動畫在疊加層上發生。 什么css代碼會使動畫效果只發生在圖像上？

所以在下面的代碼中，css 正在處理 container-image，但它也在 extra-layer 上發生。 如何使其僅適用於容器映像？

html

    <special class=“container”>
    <a href=“#" class=“container-link”>
    <img  src=“image.jpg" class=“container-image”> 
    <div class=“extra-layer”></div>
    </a>
    </special>

css

   #container {
        position: relative;
   }

    .container ::before {
        position: absolute;
        -webkit-transform: translate(-60%, -60%);
        transform: translate(-60%, -60%);
        opacity: .5;
    }

     .container :hover::before {
           -webkit-animation: circle .55s;
            animation: circle .55s;
     }

Answer 1

你的代碼不起作用。 我通過 JSFiddle 對其進行了測試。 我想你想要的是這樣的

你可以參考這里了解更多信息

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>

</body>
</html>

Answer 2

我編輯的僅顯示中心圓的代碼在這里。 當您將鼠標懸停在圖像上時，您可以檢查它。 標題和名稱。

HTML 與您的相同。 CSS 是

@import "compass/css3";
@import "compass";
@import "compass/reset";
@import "compass/css3";
body {
color: white;
font-family: 'helvetica-nue', helvetica, arial, sans-serif;
}
.gallery {
margin: 0 auto;
text-align: center;
width: 100%;
padding: 20px;
}
.gallery li {
width: 421px;
min-height: 100%;
text-align: center;
height: 255px;
position: relative;
margin: 0 auto;
display: inline-block;
overflow: hidden;
background-color: black;
}
.gallery li:nth-child(2) img {
margin: 0;
display: inline-block;
float: right;
}
.name {
transition-property:all;
transition-duration:.6s;
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: lighter;
font-size: 20px;
letter-spacing: 0.1em;
position: absolute;
height:auto;
float:left;
width: 100%;
display: block;
top: 40%;
left: 0;
text-align: center;
z-index: 2;
}
.gallery li .name .title {
display: block;
text-transform: none;
font-style: italic;
font-size: 80%;
color: rgba(255, 255, 255, .7);
transition-property: all;
transition-delay:.2s;
transition-duration:.9s;
}
.gallery li:hover img {
background-position: top top;
}
.gallery li img {
display: block;
width: 421px;
margin: 0 auto;
display: inline-block;
text-align: center;
}
#gallery {
position: relative;
}
.gallery ::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
display: block;
content: '';
width: 0;
height: 0;
background: orange;
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 1;
}
.gallery li:hover::before {
-webkit-animation: circle 0.95s;
animation: circle 0.95s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
100% {
width: 100%;
height: 100%;
opacity: 0;
}
}

這是代碼鏈接。 您可能會遇到文本的過渡效果沒有了。 但這可以恢復。 檢查功能。

謝謝

Answer 3

您使用下面的代碼。 運行代碼片段以查看結果：

 .container-link{ position: relative; display: block; width: 128px; height: 128px; } .extra-layer{ position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; } .container-link:hover img{ animation: circle 0.55s; } @keyframes circle{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

 <div class="container"> <a href='#' class="container-link"> <img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" class="container-image" /> <div class="extra-layer"></div> </a> </div>

在 css 懸停效果上，無法選擇/應用效果到特定元素？

問題描述

3 個解決方案

解決方案1
0 2019-12-20 06:36:13

解決方案2
0 2019-12-23 05:20:04

解決方案3
0 2019-12-23 05:34:05

在 css 懸停效果上，無法選擇/應用效果到特定元素？

問題描述

3 個解決方案

解決方案1 0 2019-12-20 06:36:13

解決方案2 0 2019-12-23 05:20:04

解決方案3 0 2019-12-23 05:34:05

解決方案1
0 2019-12-20 06:36:13

解決方案2
0 2019-12-23 05:20:04

解決方案3
0 2019-12-23 05:34:05