如何设置鼠标悬浮在一张图片上变成另外一张图片

最新推荐文章于 2022-08-23 16:22:00 发布
最新推荐文章于 2022-08-23 16:22:00 发布
阅读量1.5w 收藏 18
点赞数 6
分类专栏： css 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GUOSJIA/article/details/79143776
版权
css：
...
<style>
 .login {background: url(正常显示的图片.jpg)}
.login:hover{background: url(鼠标移动上显示的图片.jpg)}
</style>
<body>
<div class="login"></div>
</body>
...
GUOSJIA
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js 实现 鼠标放到图片上会显示另外一张图片
03-31
js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
uni-app的基本使用
luoyong_blog的博客
12-12 1213
uni-app小结
uni-app带你看一个不一样的view之hover-class
weixin_45966674的博客
11-21 4507
这样你就会发现 你点击后它不会立刻触发hover-class了 而是会等待hover-start-time 所设置的时间后再触发。hover-start-time要的是个纯数字 所以我们要在属性前加上 : 熟悉vue的朋友们一定知道是什么意思。这样你会发现，默认展示bdo的样式 当你点击时 会出现bdo1的样式 过会儿又变回bdo的样式。当你给父子级都设置了hover-class，你会发现 这鬼东西的触发既然还是冒泡的。这样点击子元素时 父元素的hover-class就不会触发了。
当鼠标光标放在一张图片上，如何显示另一张图片？
杜永康的博客
08-23 6030
我们会遇到一种情境，这种情境是当正常打开一个页面，有文字配有图片，可是当鼠标的光标移动到这张图片上时，会显示另一张图片。2.我们目的是想要第一张照片正常显示在页面，想要第二张照片在鼠标移动到第一张照片上显示出来。这个代码的意思就是当鼠标光标移动到这个div上时，不让第一张照片显示。以下，是我关于这个效果写的代码，大家可以复制到编辑器运行一下，加深印象。这个代码的意思就是当鼠标光标移动到这个div上时，让第二张照片显示。意思就是不将鼠标光标移动到第一张照片上时，不让第二张照片显示。5.对第二张照片设置。
uniapp image图片切换动效_Web动效实现手段
weixin_39831170的博客
12-01 1587
作者 | 大漠来源 |https://www.w3cplus.com/web/web-tips-14.html©w3cplus.com前段时间在微信群聊了一个动效的话题：鼠标悬浮的时候，三个区块依次显示；鼠标移开时，三个区块反向依次消失。如果使用CSS的triansition是否可以实现？借此话题，在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可...
鼠标悬停时，图片切换的方法
热门推荐
hanrabbit的博客
02-02 1万+
在我们写前端页面时，经常会遇到这种情况，就是鼠标悬停某个图标或者图片时，图片颜色发生了变化或者图片发生改变。 这种情况如何实现？ 1、直接在html样式里进行切换 <div class="container"> <img src="../img/icon-social-ip-white.png" onmouseover="this.src='../img/icon-social-ip-blue.png'" onmouseout="this
HTML(HBuilder)作业题7 - 点击切换图片（jquery）
古古的博客
01-04 2174
HTML.HBuilder.jquery.切换图片
2021-04-29
Zhuxxxxx的博客
04-29 71
让鼠标悬停在图片上且切换图片，可以在HTML5里直接运用<a href="#"><img onMouseOver="this.src=''" src="" onMouseOut="this.src=''" alt=""></a>这样一条代码，就可以快速利用鼠标悬停切换图片 截图如下： 在截图中可以看到onMouseOver="this.src=''"意思是鼠标悬停时的图片，src=""是默认图片，onMouseOut="this.src=''"是鼠标移出后的图片.
JQuery 鼠标悬浮，图片遮罩效果
10-27
JQuery 鼠标悬浮，图片遮罩效果 JQuery 鼠标悬浮，图片遮罩效果
js实现鼠标悬浮给图片加边框的方法
10-24
主要介绍了js实现鼠标悬浮给图片加边框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
鼠标悬停显示二维码图片
08-06
鼠标悬停显示二维码图片
jQuery鼠标悬浮图片放大特效
04-07
jQuery鼠标悬浮图片放大特效是一款鼠标移到图片上突出放大显示。
jQuery鼠标悬浮图片放大特效.zip
07-11
代码简介：jQuery鼠标悬浮图片放大特效是一款鼠标移到图片上突出放大显示。
Vue.js鼠标悬浮更换图片功能
10-19
主要为大家详细介绍了Vue.js实现鼠标悬浮更换图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html列表嵌套
GUOSJIA的博客
01-14 1万+
Title 目录 贴吧导航 大事记载 等级制度 实名制度 特点分析 品牌价值 手机贴吧 贴吧客户端 贴吧智能版 平台推广 官方平台 贴吧推广 列表嵌套：无序嵌套在有序中，直接在大的里面，根据
超链接点击完之后保持颜色不变
GUOSJIA的博客
01-16 1万+
在超链接&lt;a&gt;加color="…" 想要什么颜色就是什么颜色 无论怎么点都不会变~
html下拉菜单框框小三角找不到怎么办
GUOSJIA的博客
01-16 4840
在制作一些填写信息的表格的时候，会遇到多样的信息填写形式，单选，多选，框内填写等。 有一种有下拉菜单的选择项，用和组合编写 在制作过程你可能会遇到这样的问题： 这里的框没有达到理想效果： 这是没有达到理想效果的代码 如何改进呢？删掉 size="2"就有小三角和输入框 想要更加完美的视觉效果有“请选择…”省“请选择”区“ 只需要多加一个选项请选择…在已
unity检测鼠标悬浮哪个图片上
最新发布
08-30
在Unity中，要检测鼠标悬浮在哪个图片上，我们可以借助Raycast射线投射来实现。 首先，在每个图片对象上添加一个名为"Collider"的Collider组件，比如Box Collider或者Mesh Collider，以使其成为可检测碰撞的物体。 然后，创建一个脚本控制器，并将其附加到图片对象上。在该脚本中，我们需要使用Raycast来检测鼠标的悬浮位置与图片对象的碰撞情况。 在Update函数中，我们可以使用Input类来获取鼠标的当前位置，然后使用Camera类的ScreenPointToRay方法将鼠标位置转换为一条射线。接着，我们使用Physics类的Raycast方法进行射线碰撞检测。 具体来说，我们可以使用Physics.Raycast方法，将射线作为参数传入，并检查是否与Collider组件有碰撞。如果有碰撞，我们可以通过判断碰撞点的坐标是否在鼠标位置的范围内来确定鼠标是否悬浮在该图片上。 如果检测到鼠标悬浮在某个图片上，我们可以在脚本中添加适当的逻辑代码来处理这个事件。比如，可以在控制台中输出图片的名称或改变图片的颜色等等。 需要注意的是，如果场景中有多个图片对象，我们需要为每个图片对象分别执行射线碰撞检测。可以通过对所有图片对象的脚本控制器使用一个数组来实现循环检测。 总之，通过使用Raycast射线投射和射线碰撞检测，我们可以在Unity中检测鼠标悬浮在哪个图片上，从而触发相应的事件或行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值