js实现鼠标移入移出卡片切换内容
案例动态效果图：
html代码：
Categories
- SneakersRunning ShoesBasketball ShoesSoccer ShoesHiking ShoesSkateboarding ShoesDance shoesTennis ShoesCycling ShoesWalking ShoesGolf Shoes
- Sports ClothingJacketsBase LayersShirtsSets/Suits
- CyclingBicycleBicycle PartsBicycle AccessoriesBicycle Repair ToolsCycling ClothingsCycling ShoesElectric BicycleElectric Bicycle PartSelf Balance Scooters
- FinshingFishing RodsFishing ReelsRod ComboFishing LuresFishing LinesFishhooksFishing Tackle BoxesFishing FloatFishing NetFishing Rope
- HuntingBow & ArrowHunting OpticsHunting CamerasWeapon LightsHunting Bags & HolstersHunting KnifeHunting LightsHunting DecoyHunting Gun AccessoriesScope Mounts & Accessories
- Camping & HikingTentsSun ShelterSleeping BagsClimbing BagsOutdoor StovesOutdoor TablewaresPicnic BagsWater BagsCamping MatOutdoor Lighting
- Fitness & Body BuildingFitness EquipmentsOutdoor Fitness EquipmentBoxingYogaGymnasticsMartial ArtsWeight LiftingWeight Lifting GlovesFitness GlovesDance shoes
- Musical InstrumentsGuitarGuitar Parts & AccessoriesViolinViolin Parts & AccessoriesWoodwind InstrumentsPercussion InstrumentsInstrument Bags & CasesBrass InstrumentsKeyboard Instruments
1/3css：
*{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本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！