两种鼠标hover切换对应图片方法对比

凉风听雪

于 2024-11-14 18:01:17 发布

阅读量851

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：前端 javascript html

本文链接：https://blog.csdn.net/p_s_p/article/details/143777005

方法一：鼠标hover时使用JS给元素添加类名达到切换图片效果

<!-- hover元素 -->
<div class="hover-div">
    <ul>
        <li class="hover-div-item" data-index="1">当鼠标hover我切换对应的图片1</li>
        <li class="hover-div-item" data-index="2">当鼠标hover我切换对应的图片2</li>
        <li class="hover-div-item" data-index="3">当鼠标hover我切换对应的图片3</li>
        <li class="hover-div-item" data-index="4">当鼠标hover我切换对应的图片4</li>
    </ul>
</div>
<!-- 图片展示 -->
<div class="image-display active-img">
    <img src="example1.png" alt="Displayed Image">
</div>
<div class="image-display">
    <img src="example2.png" alt="Displayed Image">
</div>
<div class="image-display">
    <img src="example3.png" alt="Displayed Image">
</div>
<div class="image-display">
    <img src="example4.png" alt="Displayed Image">
</div>

<!-- 样式