level 1
走在云水间
楼主
一张背景图片如下
需实现效果，当鼠标移动到左边时候，就显示右边的部分。不如移动到经济实惠就显示499套餐。求一下代码有何问题。
<head>
ul li{ list-style-type:none;}
.tc{ position:absolute;overflow:hidden; width:266px; height:240px; border:1px solid #CCC;background: url(images/tc.jpg)}
ul li.tc499{ width:266px; height:80px;background-position:0 0}
ul li.tc599{ width:266px; height:80px;background-position:0 -80px}
ul li.tc799{ width:266px; height:80px;background-position:0 -160px}
ul li a.tc499:hover{ background-position:right 0}
ul li a.tc599:hover{ background-position:right -80px}
ul li a.tc799:hover{ background-position:right -160px}
</style>
</head>
<body>
<div class="tc">
<ul>
<li class="tc499"></li>
<li class="tc599"></li>
<li class="tc799"></li>
</ul>
</div>
</body>
</html>
2014年05月25日 09点05分
1
需实现效果，当鼠标移动到左边时候，就显示右边的部分。不如移动到经济实惠就显示499套餐。求一下代码有何问题。<head>
ul li{ list-style-type:none;}
.tc{ position:absolute;overflow:hidden; width:266px; height:240px; border:1px solid #CCC;background: url(images/tc.jpg)}
ul li.tc499{ width:266px; height:80px;background-position:0 0}
ul li.tc599{ width:266px; height:80px;background-position:0 -80px}
ul li.tc799{ width:266px; height:80px;background-position:0 -160px}
ul li a.tc499:hover{ background-position:right 0}
ul li a.tc599:hover{ background-position:right -80px}
ul li a.tc799:hover{ background-position:right -160px}
</style>
</head>
<body>
<div class="tc">
<ul>
<li class="tc499"></li>
<li class="tc599"></li>
<li class="tc799"></li>
</ul>
</div>
</body>
</html>
