Javascript 如何使用条件语句阻止css悬停_Javascript_Html_Css

Javascript 如何使用条件语句阻止css悬停

javascript html css

Javascript 如何使用条件语句阻止css悬停,javascript,html,css,Javascript,Html,Css,我有两个按钮在一个盒子上。。。该框有一个css:hover，如果鼠标在按钮上，我想“停止”取消鼠标悬停。。。我可以使用js，但我不喜欢。这是最后的选择我的代码： .annimation{ webkit转换：所有1；过渡：所有1； } .annimation:悬停{ -webkit转换：转换（100px，100px）比例（5,5）；转换：转换（100px，100px）刻度（5，5）； } 函数onMouseOut（self，event）{ var e=event.toElement |

我有两个按钮在一个盒子上。。。该框有一个css:hover，如果鼠标在按钮上，我想“停止”取消鼠标悬停。。。我可以使用js，但我不喜欢。这是最后的选择

我的代码：


.annimation{
webkit转换：所有1；
过渡：所有1；
}
.annimation:悬停{
-webkit转换：转换（100px，100px）比例（5,5）；
转换：转换（100px，100px）刻度（5，5）；
}
函数onMouseOut（self，event）{
var e=event.toElement | | event.relatedTarget；
while（e&；e.parentNode&；e.parentNode！=窗口）{
if（e.parentNode==self | | e==self）{
如果（e.preventDefault）e.preventDefault（）；
返回false；
}
e=e.parentNode；
}
//做点什么
}

您需要使用JS

阻止这种情况的唯一方法是将按钮作为初始悬停元素的直接子元素，而您已经说过您不能这样做，因此JS是您唯一的解决方案。

CSS解决方案


.annimation{
webkit转换：所有1；
过渡：所有1；
}
.annimation按钮{
宽度：2倍；
高度：2倍；
可见性：隐藏；
}
.Anniation:悬停按钮{
宽度：2倍；
高度：2倍；
能见度：可见；
}
.annimation:悬停{
-webkit转换：转换（100px，100px）比例（5,5）；
转换：转换（100px，100px）刻度（5，5）；
}
//![CDATA[
函数onMouseOut（self，event）{
var e=event.toElement | | event.relatedTarget；
while（e&；e.parentNode&；e.parentNode！=窗口）{
if（e.parentNode==self | | e==self）{
如果（e.preventDefault）e.preventDefault（）；
返回false；
}
e=e.parentNode；
}
//做点什么
}
//]]

我不相信在盒子上设置动画可以做到这一点。盒子和按钮之间没有关系。。。因为它们实际上不在框的上下文中，所以它们的事件不会出现在框中，所以您唯一真正的选择是全程使用javascript，而不是使用：hover作为mouseover功能，因此，您可以将事件触发器绑定在一起。您可以将其放在小提琴中吗？为了使按钮可见，它们必须位于父div的“顶部”。让动画忽略按钮的唯一方法是使用JS。我看到你已经有了一些脚本，那么我可以问你为什么反对使用JS来解决这个问题吗？@JoshKG the fiddle lik一直都在那里。我用css解决了这个问题，我正在发布解决方案……这不是css解决方案，而是HTML解决方案。虽然这是解决问题的方法，但它遵循您问题中的评论意见和@Owen'Coves'Jones的答案，所有人都正确地指出，您需要将按钮div放在动画div中，以创建一个能够以CSS为目标的父子关系。您使用HTML重组技术解决了这个问题，而不是真正使用CSS。

<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 &amp;&amp; e.parentNode &amp;&amp; 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>

<html><head>

  <style type="text/css">
    .annimation{
    webkit-transition: all 1s;
    transition: all 1s;
}
.annimation #buttons{
    width:2px;
    height:2px;
    visibility:hidden;
}
.annimation:hover #buttons{
    width:2px;
    height:2px;
    visibility:visible;
}
.annimation:hover{
    -webkit-transform: translate(100px, 100px) scale(5, 5);
    transform: translate(100px, 100px) scale(5, 5);
}
  </style>



<script type="text/javascript">//&lt;![CDATA[ 

function onMouseOut(self,event) {    
   var e = event.toElement || event.relatedTarget;
    while(e &amp;&amp; e.parentNode &amp;&amp; e.parentNode != window) {
        if (e.parentNode == self||  e == self) {
            if(e.preventDefault) e.preventDefault();
            return false;
        }
        e = e.parentNode;
    }
    //do some shit
}
//]]&gt;  

</script>


</head>
<body>
  <div onmouseout="onMouseOut(this,event)" style="width:50px; height:50px;overflow:hidden;" class="annimation" id="father">
    <div style="z-index:1;width: 2px;position:absolute;" id="buttons"><div style="width:2px;height:2px;position:relative;float:left;background-color: rgb(0,255,0);" onclick="document.getElementById('container').style.marginTop='0px'"></div><div style="width:2px;height:2px;position:relative;float:left;background-color: rgb(0,255,0);" onclick="document.getElementById('container').style.marginTop='-50px'"></div></div>
    <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>