CSS에서 단일 스타일을 트리거하기 위해 여러 스타일 사용

Question

내가 뭘 하려는지는 두 가지 스타일의 전환을 모두 포함하는 단일 스타일을 트리거하는 것입니다.

두 가지 트리거 스타일 중 하나를 사용하지만 둘 다 사용할 수는 없습니다.

예 :

<div id="widget"></div> 
<div id="tri" class="ibox"> 
<form id="trif" action="" method="get"> 
    <input id="ipbox" type="text" name="i1" value="trialbox"> 
</form> 
</div> 

및 CSS : 코드의 조각

#widget { 
position:absolute; 
height:100px; 
width:100px; 
background-color:red; 
} 
#ipbox { 
background-color:transparent; 
position:absolute; 
left:110px; 
border:3px solid black; 
padding-left:10px; 
margin:0px; 
height:40px; 
width:300; 
} 
#widget img { 
position:absolute; 
top:40%; 
left:45%; 
width:100px; 
height:100px; 
-webkit-transform:scale(1, 1); 
-webkit-transition-duration: 2s; 
} 
#widget:hover { 
-webkit-transform:scale(4, 1.5); 
-webkit-transition-duration: 1s; 
} 
#tri { 
position:absolute; 
opacity:0; 
} 
#widget:hover + #tri { 
-webkit-transition-function:ease-out; 
-webkit-transition-duration:3s; 
-webkit-transition-delay:0.5s; 
opacity:1; 
} 

나 형상 변화와 텍스트 박스 불투명도의 전이를 트리거 할 수있다. 하지만이 후 나는 텍스트 상자 위로 마우스를 가져 가서 상자의 변경된 모양을 유지하려고합니다. 내 질문에 내가 분명하기를 바랍니다. 실수를 용서하십시오. 미리 감사드립니다.

실행중인 버전 : http://jsfiddle.net/ftBrW/

Answer 1

위젯 #tri

#wrap한다 그래서 당신은 그것을 유혹 유지한다.

#tri은 defaut에 의해 불투명도 1이어야하며 0로드로 설정되어야합니다. 같은 애니메이션 : 당신이 마우스를 가져 가면

#tri {animation : onloadifavailable 0s infinite ;} 
@keyframes onloadifavailable { 
0,100% {opacity:0;} 
} 

그런 다음 #widget, 당신은 애니메이션 이름을 변경합니다. 호버 들어
:

#widget:hover #tri { 
animation: showit 3s ; 
} 
@keyframes showit { 
    0% {opacity:0;} 
100% {opacity:1} 
} 

HTML :

<div id="widget"> 
<div id="tri" class="ibox"> 
<form id="trif" action="" method="get"> 
    <input id="ipbox" type="text" name="i1" value="trialbox"> 
</form> 
</div> 
</div> 

중요한 것은 불투명 defaut에 #tri에 의해 설정되지 않습니다 : 0; 처음부터. 브라우저는 애니메이션을 지원하지 않을 수 있습니다.

Answer 2

변경이 : #widget:hover + #tri이에 : #tri:hover