css 过渡悬停字体很棒
css transition hover with font awesome
尝试在悬停时添加左 V 形,但过渡无效
div.bx-wrapper:hover div.bx-controls-direction::before{
content: "\f053";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 30px;
left: 0;
opacity: 1;
}
div.bx-wrapper div.bx-controls-direction::before{
opacity: 0;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
不知道哪里错了
您应该在选择器的默认状态下设置所有 CSS(包括过渡),然后在悬停状态下只设置 opacity:1;
:
div.bx-wrapper div.bx-controls-direction::before{
content: "\f053";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 30px;
left: 0;
opacity:0;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
div.bx-wrapper:hover div.bx-controls-direction::before{
opacity:1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="bx-wrapper">
Hover Me
<div class="bx-controls-direction">FontAwesome</div>
</div>
尝试在悬停时添加左 V 形,但过渡无效
div.bx-wrapper:hover div.bx-controls-direction::before{
content: "\f053";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 30px;
left: 0;
opacity: 1;
}
div.bx-wrapper div.bx-controls-direction::before{
opacity: 0;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
不知道哪里错了
您应该在选择器的默认状态下设置所有 CSS(包括过渡),然后在悬停状态下只设置 opacity:1;
:
div.bx-wrapper div.bx-controls-direction::before{
content: "\f053";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 30px;
left: 0;
opacity:0;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
div.bx-wrapper:hover div.bx-controls-direction::before{
opacity:1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="bx-wrapper">
Hover Me
<div class="bx-controls-direction">FontAwesome</div>
</div>