0

我在一个盒子上有 2 个按钮......盒子有一个 css：悬停，如果鼠标在按钮上，我想“停止”取消悬停......我可以使用 js，但我不想这样做。这是最后的选择。

我的代码：

http://jsfiddle.net/SXj2W/3/

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

2 回答 2

0

您将需要使用 JS。

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

于 2013-10-23T13:25:47.680 回答
0

CSS 解决方案。

http://jsfiddle.net/SXj2W/5/

<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>
于 2013-10-23T13:53:42.593 回答