0

我想要做的是触发一个包含两种不同样式的转换的单一样式，这两种样式都是鼠标悬停事件。

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

例子：

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

4

2 回答 2

0

改变这个：#widget:hover + #tri 到这个：#tri:hover

于 2013-06-04T19:04:22.057 回答
0

小部件应该#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 设置为 opacity:0；从一开始就。请记住，浏览器可能不支持动画。

于 2013-06-04T19:39:45.440 回答