鼠标悬停显示图片的js代码高手帮我看看位置问题

我想让网站的商品列表只显示文字不显示图片，等鼠标悬停时再显示图片。我用的js代码可以实现这个效果不过商品多了右侧的滚动条托下去鼠标悬停的图片显示的位置就不对了偏离很远。有... 我想让网站的商品列表只显示文字不显示图片，
等鼠标悬停时再显示图片。
我用的js代码可以实现这个效果不过商品多了右侧的滚动条托下去
鼠标悬停的图片显示的位置就不对了偏离很远。
有高手能帮我调试下么或写个好用的代码。
我是要鼠标悬停在文字上，不是悬停在图片上哦！展开

 我来答

1个回答

#合辑# 机票是越早买越便宜吗？

橘子情报局
推荐于2016-11-29 · TA获得超过6031个赞

知道大有可为答主

回答量：4113

采纳率：50%

帮助的人：2740万

我也去答题访问个人页

关注

展开全部

不用js也可以实现的嘛,
帮你写了一个纯css的版本
<!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>
    <title>test</title>
<style type="text/css">
    #list li span.img{display:none;}
    #list li a{}
    #list li a:hover{position:relative;}
    #list li a:hover span.img{display:block;position:absolute;top:0;left:30px;}
</style>
</head>
<body>
  <ul id="list">
    <li><a href="#">商品<span class="img"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" alt="百度知道" /></span></a></li>
    <li><a href="#">商品<span class="img"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" alt="百度知道" /></span></a></li>
    <li><a href="#">商品<span class="img"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" alt="百度知道" /></span></a></li>
    <li><a href="#">商品<span class="img"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" alt="百度知道" /></span></a></li>
    <li><a href="#">商品<span class="img"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" alt="百度知道" /></span></a></li>
    <li><a href="#">商品<span class="img"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" alt="百度知道" /></span></a></li>
  </ul>

</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

鼠标悬停显示图片的js代码 高手帮我看看 位置问题

其他类似问题

为你推荐：

鼠标悬停显示图片的js代码高手帮我看看位置问题