怎样做 鼠标经过标题 就 显示对应标题的内容

Question

各位老师 童鞋们 Help me！

比如说 我鼠标经过男装 下面就显示男装的内容 经过女装就显示女装的

像这样的效果怎么做啊？

Answer 1

http://www.imooc.com/view/176 果然这门课最适合你

Answer 2

下面放若干个 div，使用绝对定位叠起来，鼠标经过哪个，就使下面对应的 div  display：block，其他的均 display:none。望采纳！

Answer 3

$("div").hover(function(){      //显示内容},function(){    //隐藏内容})

Answer 4

<style>     .nav { list-style:none; border-bottom:1px solid #ccc; height:28px;}     .nav li { width:96px; border:1px solid #ccc; float:left; cursor:pointer;                   text-align:center;line-height:27px;}     .nav li.on { color:#ff5000;broder-bottom:2px solid #fff;}     .content div {border:1px solid #ccc; border-top:none;}     .hide {display:none} </style> <div class="wrap">     <ul class="nav"> <li class="on">男装</li> <li>女装</li> <li>箱包</li>     </ul>     <div class="content">         <div>这里是男装</div>         <div class="hide">这里是女装</div>         <div class="hide">这里是箱包</div>     </div> </div> <script>     $(".nav li").mouseover(function(){         var index = $(this).index();         $(this).addClass("on").siblings().removeClass("on");         $(".c_content div:eq("+index+")").removeClass("hide").siblings().addClass("hide");     }) </script>要实现这个效果布局很重要，希望对你有帮助

Answer 5

可以使用show(),hide() 方法，通过获取鼠标经过那个元素的下标来显示对应的内容！

Answer 6

布局写好 然后用js动态加载就好了