0

ボックスに 2 つのボタンがあります... ボックスには css:hover があります。マウスがボタンの上にある場合は、ホバー解除を「停止」したいと思います... 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

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 に答える
0

JSを使用する必要があります。

これを止める唯一の方法は、ボタンを最初のホバー要素の直接の子として持つことです.あなたはそれができないとすでに言っているので、JSはあなたの唯一の手段です.

于 2013-10-23T13:25:47.680 に答える