我在一个盒子上有 2 个按钮...盒子有一个 css:hover，如果鼠标在按钮上，我想“停止”悬停... 我可以使用 js，但我宁愿不用。这是最后的选择。
我的代码:
<html><head>
<style type="text/css">
.annimation{
webkit-transition: all 1s;
transition: all 1s;
}
.annimation:hover{
-webkit-transform: translate(100px, 100px) scale(5, 5);
transform: translate(100px, 100px) scale(5, 5);
}
</style>
<script type="text/javascript">
function onMouseOut(self,event) {
var e = event.toElement || event.relatedTarget;
while(e && e.parentNode && e.parentNode != window) {
if (e.parentNode == self|| e == self) {
if(e.preventDefault) e.preventDefault();
return false;
}
e = e.parentNode;
}
//do some shit
}
</script>
</head>
<body>
<div style="z-index:1;width: 10px;position:absolute;" id="buttons"><div style="width:10px;height:10px;position:relative;float:left;background-color: rgb(0,255,0);"></div><div style="width:10px;height:10px;position:relative;float:left;background-color: rgb(0,255,0);"></div></div>
<div onmouseout="onMouseOut(this,event)" style="width:50px; height:50px;overflow:hidden;" class="annimation" id="father">
<div style="margin-top:0px;width:100%;height:100%;transition: margin 2s;" id="container">
<div onclick="document.getElementById('container').style.marginTop='-50px'" style="width: 50px;height:50px;background-color:rgb(255,0,0);"></div>
<div onclick="document.getElementById('container').style.marginTop='0px'" style="width: 50px;height:50px;background-color:rgb(0,0,255);"></div>
</div>
</div>
</body></html>
最佳答案
你需要使用 JS。
阻止这种情况的唯一方法是将按钮作为初始悬停元素的直接子元素，而您已经说过您不能这样做，所以 JS 确实是您唯一的选择。
关于javascript - 如何停止有条件的CSS悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19542673/