css 仅悬停一次

kx1ctssn 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(112)

有没有什么办法可以让我的CSS只经历一次悬停循环？
我需要保持CSS的完整性，并添加一个解决方案，而不是完全改变它。
这可能不太可能，但我还是想问问。
CSS：

html .sensitive10, .sensitive5, .sensitive75, .sensitive15, .dp{
 opacity: 1.0;
-webkit-transition: 5s all ease-in-out;   
-webkit-transition-delay: 60s; 
}

html:hover .dp{
 opacity: 0.0;
 -webkit-transition: all 5s ease-in-out;
 -webkit-transition-delay: 16s;
}

#box{
 height: 60px;
 width: 60px;
 background: #0DF;
}

超文本：

<html>
 <body>
  <div id="box" class="dp"></div>
 <body>
</html>

谢谢

css

来源：https://stackoverflow.com/questions/23278654/hover-only-once

3条答案

按热度按时间

dauxcl2d1#

你可以用jQuery.one（）函数来实现，这里是参考：
http://api.jquery.com/one/
相关的例子：

<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div class="count">0</div>
<div class="target">Hover me</div>

<script>
  var n = 0;
  $(".target").one("mouseenter", function() {
    $(".count").html(++n);
  });
</script>

</body>
</html>

赞(0）回复(0）举报 2023-03-05

bzzcjhmw2#

你需要的是一个带有javascript函数的onmouseout，它可以将你的元素的className改变为一个css类，而这个类没有定义hover。

- 中央支助组**

.element_with_hover{(...)}
.element_with_hover:hover{(...)}
.element_without_hover{(...)}

- 超文本标记语言**

<div class="element_with_hover" id="hoverMe" onmouseout="javascript:removeHover('hoverMe');"></div>

- Java脚本**

function removeHover(elementId){
    document.getElementById(elementId).className = "element_without_hover";
}

赞(0）回复(0）举报 2023-03-05

bjg7j2ky3#

你现在可以通过使用CSS动画来实现这一点，CSS动画在悬停时只工作一次。
例如

@keyframes hideOpacity{
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

然后在类的悬停上使用它

html:hover .dp{
 animation-name: swipeHover;
 animation-duration: 2s;
}

赞(0）回复(0）举报 2023-03-05

我来回答

css 仅悬停一次

3条答案

相关问题

热门标签

最新问答