using multiple styles to trigger single style in css

Question

What i'm trying to do is trigger a single style that contains transitions from two different styles both being mouse hover events.

I can use it using 1 of the 2 trigger styles but not both.

Example:

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

and 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;
}

with this piece of code i can trigger the transition of shape change and text box opacity. but after this i want to hover over the textbox and keep the changed shape of the box. I hope i'm clear with my question. Excuse any mistakes. Thanks in advance.

the running version : http://jsfiddle.net/ftBrW/

Answer 1

widget should #wrap #tri

So you keep hovering it.

#tri should be at opacity 1 by defaut and turned to zero onload. With animation like :

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

Then when you hover, #widget, you change animation name .
For hover :

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

What is important is not to set by defaut #tri at opacity:0; from the beginning. Keep in mind that a browser may not support animation.

Answer 2

Change this: #widget:hover + #tri to this: #tri:hover