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

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动态加载就好了