[英]css hover size transition effect cross browser/fallback solution needed
I have a fairly simple css3 markup that displays a little cool hover effect. 我有一个相当简单的css3标记,显示了一些很酷的悬停效果。 I need a pre Internet Explorer 10 fallback. 我需要Internet Explorer 10之前的备用版本。 I also cant get it to look 100% right but never the less here is the code: 我也无法让它看起来100%正确,但是代码如下:
HTML HTML
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">$</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service</h2>
<h3 class="ca-sub">Personalized For You</h3>
</div>
</a>
</li>
</ul>
CSS CSS
.ca-menu{
padding: 0;
margin: 20px auto;
width: 500px;
}
.ca-menu li{
width: 500px;
height: 100px;
overflow: hidden;
display: block;
background: #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
border-left: 10px solid #797979;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
.ca-menu li a{
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #797979;
position:relative;
}
.ca-icon{
font-family: Century Gothic, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 20px;
text-shadow: 0px 0px 1px #797979;
line-height: 90px;
position: absolute;
width: 90px;
left: 20px;
text-align: center;
transition: all 300ms linear;
}
.ca-content{
position: absolute;
left: 120px;
width: 370px;
height: 30px;
top: 1px;
}
.ca-main{
font-size: 30px;
transition: all 300ms linear;
font-family: Century Gothic, sans-serif;
font-weight: normal;
font-style: normal;
margin-bottom:-5px;
}
.ca-sub{
font-size: 14px;
color: #797979;
transition: all 300ms linear;
font-family: Century Gothic, sans-serif;
font-weight: normal;
font-style: normal;
margin-top:-5px;
}
.ca-menu li:hover{
border-color: #57C5E0;
background: #797979;
}
.ca-menu li:hover .ca-icon{
color: #57C5E0;
text-shadow: 0px 0px 1px #57C5E0;
font-size: 50px;
}
.ca-menu li:hover .ca-main{
color: #57C5E0;
font-size: 14px;
}
.ca-menu li:hover .ca-sub{
color: #fff;
font-size: 30px;
}
Working Demo Click here ! 工作演示单击此处 !
The only thing in my markup that is css3 is the transition
effect and I feel their should be an easy css2 substitute for older browsers. 我的标记中唯一的css3是transition
效果,我觉得它们应该是旧版浏览器的简单css2替代品。 I thought Javascript but wasn't sure what. 我以为是Javascript,但不确定。 Any help guys? 有帮助吗?
You can use the jQuery UI switchClass() method to animate class changes. 您可以使用jQuery UI switchClass()方法来动画化类更改。 Change your :hover
selectors to .hover
and animate that transition: 将您的:hover
选择器更改为.hover
并为该过渡设置动画:
$('.ca-menu a').hover(function() {
$(this).parent('li').switchClass('', 'hover');
}, function() {
$(this).parent('li').switchClass('hover', '');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.