js实现鼠标移入移出卡片切换内容

更新时间：2021年10月12日 16:48:10 作者：不晓er

这篇文章主要为大家详细介绍了js实现鼠标移入移出卡片切换内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现鼠标移入移出卡片切换内容的具体代码，供大家参考，具体内容如下

案例动态效果图：

html代码：

<div class="sports-purple">
   <div class="all">
    
    <!-- 内容 -->
    <div class="content">
     
     <div class="first-block">
      <!-- 内容的侧边栏 -->
      <div class="aside">
       <h2>Categories</h2>
       <ul class="lis">
        <li class="sna">
         <a href="#">Sneakers</a>
         <div id="sub">
           <div><a href="#">Running Shoes</a></div>
           <div><a href="#">Basketball Shoes</a></div>
           <div><a href="#">Soccer Shoes</a></div>
           <div><a href="#">Hiking Shoes</a></div>
           <div><a href="#">Skateboarding Shoes</a></div>
           <div><a href="#">Dance shoes</a></div>
           <div><a href="#">Tennis Shoes</a></div>
           <div><a href="#">Cycling Shoes</a></div>
           <div><a href="#">Walking Shoes</a></div>
           <div><a href="#">Golf Shoes</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">Sports Clothing</a>
         <div id="sup">
           <div><a href="#">Jackets</a></div>
           <div><a href="#">Base Layers</a></div>
           <div><a href="#">Shirts</a></div>
           <div><a href="#">Sets/Suits</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">Cycling</a>
         <div id="cyc">
           <div><a href="#">Bicycle</a></div>
           <div><a href="#">Bicycle Parts</a></div>
           <div><a href="#">Bicycle Accessories</a></div>
           <div><a href="#">Bicycle Repair Tools</a></div>
           <div><a href="#">Cycling Clothings</a></div>
           <div><a href="#">Cycling Shoes</a></div>
           <div><a href="#">Electric Bicycle</a></div>
           <div><a href="#">Electric Bicycle Part</a></div>
           <div><a href="#">Self Balance Scooters</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">Finshing</a>
         <div id="fin">
           <div><a href="#">Fishing Rods</a></div>
           <div><a href="#">Fishing Reels</a></div>
           <div><a href="#">Rod Combo</a></div>
           <div><a href="#">Fishing Lures</a></div>
           <div><a href="#">Fishing Lines</a></div>
           <div><a href="#">Fishhooks</a></div>
           <div><a href="#">Fishing Tackle Boxes</a></div>
           <div><a href="#">Fishing Float</a></div>
           <div><a href="#">Fishing Net</a></div>
           <div><a href="#">Fishing Rope</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">Hunting</a>
         <div id="hun">
           <div><a href="#">Bow & Arrow</a></div>
           <div><a href="#">Hunting Optics</a></div>
           <div><a href="#">Hunting Cameras</a></div>
           <div><a href="#">Weapon Lights</a></div>
           <div><a href="#">Hunting Bags & Holsters</a></div>
           <div><a href="#">Hunting Knife</a></div>
           <div><a href="#">Hunting Lights</a></div>
           <div><a href="#">Hunting Decoy</a></div>
           <div><a href="#">Hunting Gun Accessories</a></div>
           <div><a href="#">Scope Mounts & Accessories</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">Camping & Hiking</a>
         <div id="cam">
           <div><a href="#">Tents</a></div>
           <div><a href="#">Sun Shelter</a></div>
           <div><a href="#">Sleeping Bags</a></div>
           <div><a href="#">Climbing Bags</a></div>
           <div><a href="#">Outdoor Stoves</a></div>
           <div><a href="#">Outdoor Tablewares</a></div>
           <div><a href="#">Picnic Bags</a></div>
           <div><a href="#">Water Bags</a></div>
           <div><a href="#">Camping Mat</a></div>
           <div><a href="#">Outdoor Lighting</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">Fitness & Body Building</a>
         <div id="fit">
           <div><a href="#">Fitness Equipments</a></div>
           <div><a href="#">Outdoor Fitness Equipment</a></div>
           <div><a href="#">Boxing</a></div>
           <div><a href="#">Yoga</a></div>
           <div><a href="#">Gymnastics</a></div>
           <div><a href="#">Martial Arts</a></div>
           <div><a href="#">Weight Lifting</a></div>
           <div><a href="#">Weight Lifting Gloves</a></div>
           <div><a href="#">Fitness Gloves</a></div>
           <div><a href="#">Dance shoes</a></div>
         </div>
        </li>
        <li class="sna">
         <a href="#">Musical Instruments</a>
         <div id="mus">
           <div><a href="#">Guitar</a></div>
           <div><a href="#">Guitar Parts & Accessories</a></div>
           <div><a href="#">Violin</a></div>
           <div><a href="#">Violin Parts & Accessories</a></div>
           <div><a href="#">Woodwind Instruments</a></div>
           <div><a href="#">Percussion Instruments</a></div>
           <div><a href="#">Instrument Bags & Cases</a></div>
           <div><a href="#">Brass Instruments</a></div>
           <div><a href="#">Keyboard Instruments</a></div>
         </div>
        </li>
       </ul>
       
       <div class="flip">
        <a href="#"class="page pagedown">
         <img src="../images/arrow.png">
        </a>
        <a href="#"class="page pageup">
         <img src="../images/arrow.png">
        </a>
        <div class="tail">
         1/3
        </div>
       </div>
      </div>
      
     </div>
 
 
    </div>
 
   </div>
 
  </div>
 
</div>

css：

*{
 margin:0;
 padding:0;
}
a{
 text-decoration: none;
}
li{
 list-style: none;
}
 
.sports-purple{
 width: 100%;
 background-color: #EEEEEE;
 position: relative;
 padding-top: 10px;
}
 
/* 内容的侧边栏样式开始 */
.first-block{
 width: 100%;
 height: 500px;
}
.aside{
 width: 280px;
 height: 465px;
 background-color: #FFFFFF;
 margin-left: 150px;
}
.aside h2{
 color: #a059cb;
 text-align: left;
 line-height: 60px;
 border-bottom: 1px solid #A059CB;
 font-weight: 400;
 font-size: 18px;
 padding: 0 20px;
}
.lis li{
 border-bottom: 1px solid #EEEEEE;
 line-height: 40px;
 height: 40px;
 margin: 0 20px 0 20px;
}
.lis li a{
 color: #000000;
 font-size: 13px;
}
.list a:hover,.lis li a:hover{
 color: #FF4500;
 text-decoration: underline;
}
 
.flip{
 margin: 20px 0 20px 0px;
 line-height: 30px;
}
.flip .pagedown{
 width: 30px;
 height: 30px;
 border-radius: 4px;
 display: inline-block;
 border: 1px solid #a5a5a5;
 position: relative;
 left: 20px;
 overflow: hidden;
 margin-bottom: 20px;
}
.flip .pagedown img{
 position: absolute;
 left: 10px;
 top: 13px;
}
.flip .pageup{
 width: 30px;
 height: 30px;
 border-radius: 4px;
 display: inline-block;
 border: 1px solid #a5a5a5;
 position: relative;
 left: 40px;
 overflow: hidden;
 margin-bottom: 20px;
}
.flip .pageup img{
 position: absolute;
 left: -30px;
 top: -32px;
}
.flip .tail{
 float: right;
 margin-right: 130px;
 font-size: 12px;
}
 
#sub,#sup,#cyc,
#fin,#hun,#cam,#fit,#mus{
 width: 300px;
 height: 403px;
 position: absolute;
 left: 400px;
 top: 70px;
 font-size: 13px;
 border: 1px solid #A059CB;
 background-color: #FFFFFF;
 z-index: 10;
 display: none;
}
.aside li:hover{
 border-left: 4px solid #A059CB;
 border-top: 1px solid #A059CB;
 border-bottom: 1px solid #A059CB;
 padding-left: 10px;
 margin-left: 20px;
 background-color: #FFFFFF;
}
 
#sub div,#sup div,
#cyc div,#fin div,
#hun div,#cam div,#fit div,
#mus div{
 margin-left: 20px;
}

js代码：

// 根据类名获取li
var lis = document.getElementsByClassName("sna");
 
//循环遍历类名为sna的li标签
for(var i = 0;i<lis.length;i++){
 //为li注册鼠标移入事件
 lis[i].onmouseover = function(){
  /* this：类名为sna的li */
  //console.log(this);
  /* this.children：获取的li标签下的子元素 */
  // console.log(this.children);
  var next  = this.children;
  //next[1]:在li下的两个子元素中，需要显示出来的元素的标签的下标为1
  next[1].style.display = "block";
 };
 //为li注册鼠标移出事件
 lis[i].onmouseout = function(){
  var next  = this.children;
  next[1].style.display = "none";
 };
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用，他可以返回请求的数据，然后利用客户端的js进行解析，这一点体现出js的强大，本文介绍JS解析json数据并将json字符串转化为数组的实现方法，需要了解的朋友可以参考下
2012-12-12
JavaScript动画原理之如何使用js进行动画效果的实现
在现在做页面很多时候都会用上动画效果,比如下拉菜单,侧边搜索栏,层的弹出与关闭等等,下面这篇文章主要给大家介绍了关于JavaScript动画原理之如何使用js进行动画效果实现的相关资料,需要的朋友可以参考下
2023-04-04
JavaScript获取浏览器窗口尺寸的几种方法
JavaScript是一种广泛使用的脚本语言,用于开发网页和应用程序,在Web开发中,经常需要获取浏览器窗口的尺寸,以便根据窗口大小进行布局或执行其他操作,本文将介绍如何使用JavaScript来获取浏览器窗口尺寸,需要的朋友可以参考下
2023-11-11
JavaScript 中的运算符和表达式介绍
这篇文章主要介绍了JavaScript 中的运算符和表达式介绍，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
JSON的parse()方法介绍
今天小编就为大家分享一篇关于JSON的parse()方法介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
JS利用Canvas实现文字水印和图片水印合成
这篇文章主要为大家详细介绍了JavaScript如何利用Canvas实现文字水印和图片水印合成的效果，文中的示例代码讲解详细，需要的小伙伴可以参考一下
2022-11-11
详解iframe与frame的区别
Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性，通过本文给大家详解细节iframe与frame的区别，对iframe与frame的区别相关知识感兴趣的朋友一起学习吧
2016-01-01
JavaScript中?. 和??分别是什么详解
在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,下面这篇文章主要给大家介绍了关于JavaScript中?. 和??分别是什么的相关资料,需要的朋友可以参考下
2023-02-02
6种JavaScript判断对象自身为空的方法小结
这篇文章主要为大家详细介绍了6种JavaScript判断对象自身为空的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
JS对象序列化成json数据和json数据转化为JS对象的代码
这篇文章主要介绍了JS对象序列化成json数据和json数据转化为JS对象的代码,需要的朋友可以参考下
2017-08-08

js实现鼠标移入移出卡片切换内容

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具