在 CSS 悬停效果上，无法选择/应用效果到特定元素？

Posted 2023-03-06

技术标签:

【中文标题】在 CSS 悬停效果上，无法选择/应用效果到特定元素？【英文标题】：On a css hover effect, not able to select/apply effect to a specific element? 【发布时间】：2020-04-12 15:56:09 【问题描述】：

我有一个带有 div 叠加层的图像。 div 覆盖显示在悬停时。同样在悬停时，我想要一个动画效果。问题是，动画效果发生在图像和叠加层上，但我不希望动画效果发生在叠加层上。

此代码有效，但我无法阻止动画在叠加层上发生。什么 css 代码会让动画效果只发生在图像上？

所以在下面的代码中，css 正在容器图像上工作，但它也在额外层上发生。如何使其仅适用于容器映像？

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;

【问题讨论】：

去掉 :hover 和 :before 之前的空格符号“也很可能会遇到伤害世界，请使用标准括号"，即<special class="container"> 您好 Paulie_D，谢谢，但这没有用。然后什么都不会发生。您好 EGC，它们在真实代码中是正确的，当我将代码放在此页面上时，我想这只是一个剪切和粘贴问题。我们需要更清楚地解释您想要发生的事情 + 并且需要一个最小可重现示例***.com/help/minimal-reproducible-example / - 如果我们要提供帮助。这是一个开始：jsfiddle.net/sheriffderek/48u02ebf 【参考方案1】：

您使用下面的代码。运行 sn -p 看看结果：

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

【讨论】：

【参考方案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;

Here is the code Link。您可能会遇到文本的过渡效果消失了。但这可以恢复。检查功能。

谢谢

【讨论】：

【参考方案3】：

您的代码不起作用。我通过 JSFiddle 对其进行了测试。我想你想要的是这样的

you can refer here for further information

<!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"  class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>

</body>
</html>

【讨论】：

嗨 Asad，如果您将其添加到您的代码中： .display padding-top:200px;背景颜色：rgba(0, 0, 0, 0.6); #container 位置：相对； .container ::before 位置：绝对；最高：50%；左：50%； z指数：999；显示：块；内容： '';宽度：0；高度：0；背景：橙色；边界半径：100%； -webkit-transform: 翻译(-60%, -60%);变换：翻译（-60%，-60%）；不透明度：1； .container :hover::before -webkit-animation: circle .55s;动画：圈0.55s； @-webkit-keyframes circle 0% opacity: 1; 100% 宽度：100%;高度：100%；不透明度：0； @keyframes 圆圈 0% 不透明度：1; 100% 宽度：100%;高度：100%；不透明度：0; 你会看到问题：橙色圆圈只出现在显示屏上，而我希望它只出现在图像上（而不是显示屏上） @user1864734 你能分享你的代码链接吗？因为我们从您的问题陈述中了解到的就是我们为您提供的。谢谢嗨 Asad，看看这里...你看到橙色圆圈出现了两次。如何只显示中心橙色圆圈。谢谢codepen.io/trynn/pen/zYxZQbx

以上是关于在 CSS 悬停效果上，无法选择/应用效果到特定元素？的主要内容，如果未能解决你的问题，请参考以下文章

强制删除从远程 css 库继承的元素的悬停 css 效果

特定条件下的 CSS 悬停效果（即包含文本）

我无法在 div 上应用悬停效果

使用 CSS 在悬停图像上创建缩放效果？

如果 <td> 内部有多个 <div>，则 <td> 上悬停效果的 CSS 无法正常工作

使用 CSS3 触摸事件的悬停效果