【tips】hover的时候改变img元素的图片地址

原创 于 2025-03-18 15:05:59 发布
· 199 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

直接改动css就可以。

.service-item{

  &:hover {
        opacity: 0.8;
        transform: translateY(-2px);

        .service-text {
          color: #409EFF;
        }

        .service-icon[src*='icon_service.png'] {
          content: url('@/assets/icons/icon_service_a.png');
        }
      }
}

 <div class="service-item">
          <img src="@/assets/icons/icon_service.png" alt="service" class="service-icon" />
          <span class="service-text">智能客服</span>
        </div>
Dorcas_FE
关注
【layui】Layui实现数据表格中鼠标悬浮图片放大效果
德仔
04-25 2337
Layui实现数据表格中鼠标悬浮图片放大效果 前端代码： var url = baseUrl + "/api/SysUser/GetSysUsers"; table.render({ elem: '#currentTableId', url: url, height: 700, width: 1600,
用Jquery写的hover时的Tip提示
th_nightmare的专栏
06-25 3511
jquery写的hover时提示
css小技巧——鼠标悬浮时切换图片
朝阳39的博客
03-18 7814
完整范例代码 <template> <div style="padding: 20px"> <img src="https://mat1.gtimg.com/www/mb/images/face/104.gif"> </div> </template> <style scoped> img:hover { content: url(https://mat1.gtimg....
img hover
apgywva897901的博客
05-11 234
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>imghover</title> <style> img {opacity:0.3;;filter(alpha=30)} i...
img被hover、focus的时候CSS改变src图片路径
怡暘
06-20 1858
img被hover、focus时候CSS改变src图片路径。
img hover图片缩放效果图
catherine的博客
11-15 5832
img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); }  
模拟img的hover切换
dotffer的专栏
03-26 3774
关于img:hover； 首先明确一点：img的url属性是无法在css中设置的，所以img:hover{url:’xxx’}是不存在的； 本来可以使用background来当做背景图片设置；但是：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。IE低版本对这个属性支持不完善，不支持背景图片的缩放设置，只能把原图裁到
图片悬停效果库imagehover：为你的网站增添互动性与美学感
gitblog_00074的博客
05-16 488
图片悬停效果库imagehover：为你的网站增添互动性与美学感 bootstrap-image-hoverImage hover effects that work with or without bootstrap项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-image-hover 1、项目介绍 imagehover是一个开源项目，提供了H...
jQuery实现实用的动态信息提示框tips效果可用在超级链接或图片上.zip
11-07
综上所述，jQuery实现实用的动态信息提示框Tips效果主要涉及事件处理、动态创建元素、CSS样式、动画效果以及可能的插件化开发。通过这些技术，我们可以为网站的超级链接或图片添加丰富的交互体验，提升用户满意度。...
3种形式tips帮助提示框代码，鼠标悬停在问号上，出现提示框。提示框有纯文字，html代码，图片三种形式。兼容主流浏览器
05-23
var tooltipContent = '<div class="tooltip"><img src="image.jpg" alt="图片提示"></div>'; $(this).append(tooltipContent); }, function() { $('.tooltip').remove(); }); ``` 在上述代码中，我们创建了一个...
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
10-16
在自定义模板中，为图片添加了鼠标悬浮（hover）事件监听，当鼠标悬停在图片上时，通过调用`layer.tips`方法来显示一个包含大图的弹出层，达到放大效果。 3. **图片恢复原图机制**：为了实现鼠标离开图片后自动恢复...
img标签hover的时候修改为另一张图片
weixin_44279243的博客
07-09 746
【代码】img标签hover的时候修改为另一张图片。
css - 新闻列表结构布局,img hover效果
King Saj
04-26 599
.tab-content .tab-item a.picture:hover span { /* 定义2D缩放比例 */ transform: scale(3.05); /* 元素当过渡效果 */ transition: transform .3s ease-out, -webkit-transform .3s ease-out; } .replace-img { /* 渐变 */ ...
img标签添加::before ::after 伪元素无效，伪元素增加:hover伪类无效
最新发布
无心使然云中漫步
05-27 1720
## 1 问题 - img标签添加::before ::after 伪元素无效 - 伪元素增加:hover伪类无效 ## 2 解决 - 只能在img前后增加dom元素 - 可以这样写:hover::before{} :hover::after{}
CSS：img被hover的时候改变src图片路径
weixin_56349487的博客
10-29 3574
img的src可以通过content改变数遍hover时的图片路径
前端入门学习笔记二十六
m0_65384293的博客
12-02 527
前端入门学习笔记
HTML 网页中 自定义图像单击或鼠标悬停时放大
hello:code I am captain
08-24 9966
HTML 网页中 自定义图像单击或鼠标悬停时放大
html图片的悬停事件（利用CSS、JavaScript）
热门推荐
weixin_58821483的博客
06-02 1万+
一般在使用<img>标签时，有时会有移动鼠标到图片上时改变图片状态的需求， 如切换图片、显示图片信息、打开新窗口等。下面以
用jQuery制作一个图片提示效果
05-27
好的，您可以参考以下的代码示例来实现一个基于 jQuery 的图片提示效果： HTML代码： ```html <div class="image-tips"> <img src="your-image-src.jpg" alt="Your Image"> <span class="tips-text">Your Image Description</span> </div> ``` CSS代码： ```css .image-tips { position: relative; display: inline-block; } .image-tips img { display: block; width: 100%; height: auto; } .image-tips .tips-text { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 200px; padding: 10px; background-color: #333; color: #fff; font-size: 14px; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .image-tips:hover .tips-text { opacity: 1; visibility: visible; } ``` 解释： 1. 首先，我们创建一个包含图片和提示文字的 div 容器，并设置其为 `position: relative;` 以便内部元素的定位。 2. 然后，设置图片的宽度为100%以适应容器宽度。 3. 接下来，我们将提示文字设置为 `position: absolute;`，并设置其顶部距离为图片底部。 4. 为了使提示文字居中显示，我们设置其左侧距离为50%，并使用 `transform: translateX(-50%);` 将其水平居中。 5. 为了使提示文字的内容更加清晰，我们设置其背景颜色为黑色，字体颜色为白色，并设置其透明度为0。 6. 最后，在鼠标悬停在图片上时使提示文字的 `opacity` 和 `visibility` 属性发生变化，从而实现图片提示效果。 希望这个示例可以对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值