共計(jì) 1692 個(gè)字符，預(yù)計(jì)需要花費(fèi) 5 分鐘才能閱讀完成。
自動(dòng)寫代碼機(jī)器人，免費(fèi)開通
丸趣 TV 小編給大家分享一下 jQuery 鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果怎么實(shí)現(xiàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
效果如下：
代碼如下：
!DOCTYPE htmlhtml
head
meta http-equiv= content-type content= text/html; charset=UTF-8
title jQuery 鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果 /title
style
margin: 0;
padding: 0;
list-style: none;
img {
border: 0;
color: #fff;
text-decoration: none;
.servicesBox {
width: 1000px;
height: 270px;
margin: 0 auto;
clear: both;
line-height: 18px;
color: #999999;
font-size: 12px;
.servicesBox .serBox {
cursor: pointer;
border: 1px solid #fff;
display: inline;
width: 198px;
height: 250px;
float: left;
overflow: hidden;
background-color: #f7f7f7;
position: relative;
.servicesBox .serBoxOn {
font-family: Microsoft Yahei
display: none;
width: 320px;
height: 270px;
background: url(http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif) repeat 0px 0px;
position: absolute;
left: 0px;
top: 0px;
z-index: 19;
.servicesBox .serBox .pic1 {
width: 110px;
height: 110px;
text-align: center;
position: absolute;
top: 22px;
right: 41px;
z-index: 99;
.servicesBox .serBox .pic2 {
width: 110px;
height: 110px;
text-align: center;
position: absolute;
top: 22px;
left: -110px;
z-index: 99;
.servicesBox .serBox .txt1 {
width: 198px;
height: 100px;
color: #999999;
position: absolute;
top: 145px;
left: 0px;
z-index: 99;
.servicesBox .serBox .txt2 {
width: 198px;
height: 100px;
color: #a9cf4f;
position: absolute;
top: 145px;
right: -240px;
z-index: 99;
.servicesBox .serBox span.tit {
font-size: 16px;
display: block;
text-align: center;
.servicesBox .serBox .txt1 .tit {
color: #000000;
line-height: 30px;
.servicesBox .serBox .txt2 .tit {
color: #fff;
line-height: 30px;
font-family: Microsoft Yahei
.servicesBox .serBox p {
padding: 0 10px;
text-align: center;
/style
/head
body
!-- 代碼 begin --
p >
以上是 jQuery 鼠標(biāo)懸停內(nèi)容動(dòng)畫切換效果怎么實(shí)現(xiàn)的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注丸趣 TV 行業(yè)資訊頻道！
向 AI 問一下細(xì)節(jié)
丸趣 TV 網(wǎng) - 提供最優(yōu)質(zhì)的資源集合！
正文完
