js小案例-相册选择功能

远方有个小海

已于 2022-11-14 13:25:01 修改

阅读量389

点赞数

文章标签： javascript 前端 html

于 2022-11-14 13:22:54 首次发布

本文链接：https://blog.csdn.net/m0_51068451/article/details/127845051

版权

案例介绍

案例通过使用鼠标的悬停事件，改变img元素的src链接实现图片替换，改变img元素的className值实现选中样式的添加。

此功能多应用于电商网站的商品展示。

效果展示

代码展示

HTML

<div class="container">
      <img src="./image/01.webp" alt="" class="image">
      <div class="imageItems">
          <img src="./image/01.webp" alt="" class="item active">
          <img src="./image/02.webp" alt="" class="item">
          <img src="./image/03.webp" alt="" class="item">
          <img src="./image/04.webp" alt="