JavaScript 淘宝宝贝网页鼠标悬停图片放大

最新推荐文章于 2023-08-24 23:54:21 发布

MEX651938106

最新推荐文章于 2023-08-24 23:54:21 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/MEX651938106/article/details/74625837

版权

本文展示了如何使用JavaScript实现一个简单的网页效果，当鼠标悬停在商品图片上时，图片会放大显示在独立的展示区域。通过设置CSS样式和添加事件监听器，实现了图片边框颜色变化及放大功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .img-ul img{
               width: 80px;
               margin: auto 5px;
               border: 1px solid salmon;
           }
           #show-big{
               width: 300px;
               height: 300px;
               border: 1px red solid;
           }
           .img-ul img:hover{
               cursor: pointer;
               border: 1px solid red;
           }
       </style>
       <script>
           function enter(o){
               document.getElementById("show-big").src = o.src;
           }
       </script>


   </

最低0.47元/天解锁文章

MEX651938106

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 淘宝宝贝网页鼠标悬停图片放大

.img-ul img{ width: 80px; margin: auto 5px; border: 1px solid salmon; } #show-big{ width: 300px;
复制链接

扫一扫