Question

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

我可以使用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/

Answer 1

将此更改为#widget:hover + #tri：#tri:hover

Answer 2

小部件应该#wrap #tri

所以你一直在盘旋它。

#tri应该通过defaut处于不透明度1并且转为零onload。动画如：

#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;从最开始。请记住，浏览器可能不支持动画。

使用多种样式在css中触发单一样式

2 个答案: