再次请教高手 随着li:hover背景图片的移动图片换
声明：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> <li><span class="a-name"><a href="">藕塘大酒店</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="">藕塘大酒店</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="">藕塘大酒店</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> </ul> <div class="clear"></div> </div> </div> <div class="clear"></div> </body></html>
[解决办法]
<img src="images/quick-l.png" onmouseover="this.src='images/big-lion.jpg'" onmouseout="this.src='images/quick-l.png'" style="padding-top:5px;"/>
逻辑是对的！再重新设置一下img 的大小看看
[解决办法]