JavaScript 鼠标滑动，图片显示隐藏

Unsplash

当一个区域需要展示多张图片，而该区域的空间大小受到限制时，我们可以通过这种方式来达到预览哪张图片就展示该图片，并隐藏其他图片的方式来达到目的，这就是简化版的手风琴效果

HTML 结构如下

<div id="Tabs">
        <li class="bg">
                <span class="hover"><a href="http://www.jianshu.com/u/b0c7095032f3">第一个年糕</a></span>
            <img src="images/n1.jpg" class="xs">
                <span><a href="http://www.jianshu.com/u/b0c7095032f3">第二个年糕</a></span>
            <img src="images/n2.jpg">
                <span><a href="http://www.jianshu.com/u/b0c7095032f3">第三个年糕</a></span>
                <img src="images/n3.jpg">
</div>

CSS 样式如下

*{margin:0px; padding:0px;}
#Tabs{width:300px; height:305px;border:1px solid #ddd;margin:50px auto;}
#Tabs ul li{list-style-type:none;padding:0px 10px 0px 10px;}
#Tabs ul li a{color:#2d2d2d;font-size:14px; text-decoration:none;}
#Tabs ul li a:hover{color:#eb1c24;}     
#Tabs ul li span.hover a{color:#eb1c24;}
#Tabs ul li span a{color:#726168;}
#Tabs ul li span a:hover{color:#eb1c24;}
#Tabs ul li p{line-height:30px;}
#Tabs ul li img{width:278px;height:170px;;}
#Tabs ul li img.xs{display:block;}

引入 jQuery 库，通过 $(this) 获取到鼠标所悬停的 li 元素， 显示相应的图片，并隐藏其他图片

$("#Tabs ul li").mouseover(function(){
    $("#Tabs ul li p span").removeClass("hover");