Question

无论如何，我只能让我的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：

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

谢谢

Answer 1

您可以使用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>

Answer 2

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

<强> CSS

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

<强> HTML

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

<强> JAVASCRIPT

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

只悬停一次

2 个答案: