CSS hover를 조건부로 멈추는 법

상자에 2 개의 버튼이 있습니다 ... 상자에 css : hover가 있습니다. 마우스가 버튼 위에 있으면 펼쳐 놓고 싶습니다 ... 나는 js를 사용할 수 있지만 나는하지 않는 것을 선호합니다. 그것은 마지막 대안입니다.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>

출처

2013-10-23 Nelson Galdeman Graziano

난 당신이 상자에 설정 한 애니메이션이 할 수 있다고 생각하지 않습니다. 상자와 버튼 사이에는 관계가 없습니다. 상자의 컨텍스트에 실제로 들어 있지 않기 때문에 이벤트가 상자까지 버블 링 할 수 없으므로 유일한 선택은 자바 스크립트를 사용하는 것입니다. 전체적인 방법으로 마우스 오버 기능을 사용하려면 : 마우스 오버 기능을 사용하지 마십시오. 따라서 이벤트 트리거를 함께 묶을 수 있습니다. –

이것을 바이올린에 넣을 수 있습니까? –

버튼을 볼 수있게하려면 버튼이 아버지 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

이것은 HTML 솔루션만큼 CSS 솔루션이 아닙니다. 귀하의 문제를 해결하는 방법이지만 질문에 대한 조언과 @Owen 'Coves'Jones의 대답에 대한 조언이 이어집니다. 모든 사람들은 귀하가 귀하의 내부에 단추 div를 넣어야한다고 지적했습니다. 애니메이션 div를 사용하여 CSS에서 타겟팅 할 수있는 상위 하위 관계를 만듭니다. –

이 문제를 막을 수있는 유일한 방법은 단추를 초기에 배치 한 요소의 직접적인 하위 요소로 사용하는 것이고 이미 그렇게 할 수 없다고 말한 것이므로 JS가 유일한 유일한 방법입니다.

출처

2013-10-23 13:25:47

나는 CSS로 해결했다. 내 대답을 확인해 보라. –

CSS를 사용하지 않고 HTML 재구성 기술로 해결했습니다. –

CSS hover를 조건부로 멈추는 법

답변

관련 문제