css懸停大小過渡效果跨瀏覽器/回退解決方案需要

我有一個相當簡單的css3標記，顯示一個很酷的懸停效果。我需要預先安裝Internet Explorer 10後備。我也不能得到它看起來100％正確的，但從來沒有在這裏少是代碼：css懸停大小過渡效果跨瀏覽器/回退解決方案需要

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

.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; 
}

工作演示點擊here！

在我的標記是唯一的是css3是transition效果，我覺得他們應該是一個簡單的css2替代舊版瀏覽器。我以爲Javascript，但不知道是什麼。任何幫助傢伙？

來源

2013-08-26 Dave C

您可以使用jQuery UI switchClass() method爲類更改添加動畫效果。更改:hover選擇到.hover和動畫過渡：

$('.ca-menu a').hover(function() { 
    $(this).parent('li').switchClass('', 'hover'); 
}, function() { 
    $(this).parent('li').switchClass('hover', ''); 
});

http://jsfiddle.net/LMZUv/

來源

2013-08-26 18:27:24

css懸停大小過渡效果跨瀏覽器/回退解決方案需要

回答

相關問題