再次 随着li:hover背景图片的移动图片换
日期：2014-05-17 浏览次数：20640 次
再次请教高手 随着li:hover背景图片的移动图片换
声明：quick-l.png是小图，big-lion.jpg是quick-l.png放大后的图片，怎么样li:hover背景图片的移动 后面的小图变成大图呢？我用onmouseout只能将鼠标放上面才又反应，请教各位……
声明：quick-l.png是小图，big-lion.jpg是quick-l.png放大后的图片，怎么样li:hover背景图片的移动 后面的小图变成大图呢？我用onmouseout只能将鼠标放上面才又反应，请教各位……
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asas</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
.hotel-yuding{width:730px; float:right;border:1px solid #A8C4DF; margin-bottom:15px;}
.hotel-yuding-header{width:730px;background-color:#F5F8FC;}
.yuding-h3-ttleft{background:url("images/tuijian.png") no-repeat scroll 0px 4px transparent;color:#444B77; margin-left:5px;height:26px;line-height:26px; z-index:2; display:block;padding-left:22px;}
.hotel-yuding-content{width:728px;}
.hotel-yuding .bookall{ width:292px; float:left; text-align:left; line-height:35px; }
.hotel-yuding .bookall li{background:url("images/little-li.png") no-repeat scroll 7px 14px transparent;padding-left:20px; height:33px; line-height:33px; overflow:hidden;word-break:keep-all;/* 不换行 */text-overflow:ellipsis;}
.hotel-yuding .bookall li .a-name{ width:185px; overflow:hidden;font-size:14px; float:left; overflow:hidden;height:33px; line-height:33px;}
.hotel-yuding .bookall li .a-ding{background:url("images/quick-l.png") no-repeat scroll 0px 3px transparent; z-index:1;}
.hotel-yuding .bookall li:hover{background:url("images/little-lion.jpg") no-repeat scroll 0px 3px transparent; z-index:999;}
</style>
</head>
<body>
<div class="hotel-yuding clear">
<div class="hotel-yuding-header">
<h3 class="yuding-h3-ttleft"> 推荐预定</h3>
<span class="h3-ttright"><a href="">更多>></a></span> </div>
<div class="clear"></div>
<div class="hotel-yuding-content">
<ul class="bookall">
<li><span class="a-name"><a href="">11大酒店藕塘大酒店</a></span><a href=""> <img src="images/quick-l.png" onmouseover="this.src='images/big-lion.jpg'" onmouseout="this.src='images/quick-l.png'" style="padding-top:5px;"/></a></li>
<li><span class="a-name"><a href="">11大酒店</a></span><a href=""><img src="images/quick-l.png" onmouseover="this.src='images/big-lion.jpg'" onmouseout="this.src='images/quick-l.png'" style="padding-top:5px;"/></a></li>
<li><span class="a-name"><a href="">11大酒店</a></span><a href=""><img src="images/quick-l.png" onmouseover="this.src='images/big-lion.jpg'" onmouseout="this.src='images/quick-l.png'" style="padding-top:5px;"/></a></li>
<li><span class="a-name"><a href="">11大酒店</a></span><a href=""><img src="images/quick-l.png" onmouseover="this.src='images/big-lion.jpg'" onmouseout="this.src='images/quick-l.png'" style="padding-top:5px;"/></a></li>
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
