如何停止CSS懸停與條件

我有一個盒子上的2個按鈕...該盒子有一個css：懸停，我想「停止」如果鼠標在按鈕上停止... 我可以使用js，但我寧願不要。這是最後的選擇。如何停止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>

來源

2013-10-23 Nelson Galdeman Graziano

我不相信你可以設置包裝盒上的動畫做到這一點。盒子和按鈕之間沒有任何關係......因爲它們實際上並不在盒子的上下文中，它們的事件不會被泡到盒子中，所以你唯一真正的選擇是使用javascript整個方式，而不是使用：懸停的鼠標懸停功能，所以你可以把事件觸發器綁在一起。 –

你可以把它放在小提琴裏嗎？ –

爲了使按鈕可見，它們必須是父div的「頂部」。讓動畫忽略按鈕的唯一方法是通過使用JS。我看到你已經有了一些腳本，所以我可以問你爲什麼反對用JS來解決這個問題？ –

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-23 13:53:42

這不是一個CSS解決方案，而是一個HTML解決方案。雖然這是解決問題的方法，但它遵循您的問題中的意見和@Owen'Coves'Jones的建議，所有人都正確地指出，您需要將按鈕div放入您的內部動畫div來創建一個可以被CSS定位的父子關係。 –

您將需要使用JS。

阻止這種做法的唯一方法是將按鈕作爲初始懸停元素的直接子元素，並且您已經表示您不能這麼做，因此JS是您唯一真正的度假村。

來源

2013-10-23 13:25:47

我解決了與CSS，檢查我的答案。 –

你用HTML重組技術解決了它，而不是真的用CSS。 –

如何停止CSS懸停與條件

回答

相關問題