css - 使用多种样式触发CSS中的单一样式

Question

我想做的是触发一个单一样式，其中包含来自两种不同样式的过渡，这两种样式都是鼠标悬停事件。

我可以使用 2 种触发器样式中的一种来使用它，但不能同时使用这两种样式。

例子:

<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

小部件应该#wrap #tri

所以你一直在上面徘徊。

#tri 应该默认为不透明度 1，并在加载时变为零。 像这样的动画:

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

重要的是不要默认#tri at opacity:0;从一开始就。请记住，浏览器可能不支持动画。