CSS代码实现鼠标移过更换背景图片

最新推荐文章于 2023-05-16 11:08:53 发布
最新推荐文章于 2023-05-16 11:08:53 发布
阅读量7.9k 收藏 4
点赞数 3
分类专栏： CSS 文章标签： CSS html 鼠标 更换 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achenb/article/details/47002967
版权
本文介绍如何利用CSS代码实现鼠标移过图片时背景图片自动更换的效果。通过设置不同的:hover和:active状态，使得元素在鼠标悬停和点击时背景图片发生变化。示例代码中展示了详细的操作步骤。
摘要由CSDN通过智能技术生成

很多时候我们都能够看到，当我们用鼠标移过去的时候，指向的图片将会变成另外一个图片。下面我就将实现该功能的代码分享出来，希望能够帮助到大家。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <style type="text/css">
  .logo-link {
width:500px;
height:500px;
text-decoration:none;
display:block;

最低0.47元/天 解锁文章
achenb
关注
专栏目录
纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
心有猛狗
09-30 2万+
跟着慕课网的教程学习了一下伪类 ，然后试着练习了一下用CSS伪类来实现背景图片切换。 先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。 要用到的伪类及其作用有： 1、nth-of-type()给每个文字块设置不同颜色。 2、::after 添加圆形缩略图的div 3、nth-of-type()配合::after添加缩略图 4、 ::befor 给圆形缩
css 鼠标滑动事件 图片更换
荒的博客
12-01 290
css 鼠标滑动事件 图片更换
css+js实现鼠标经过图片后,图片变背景图,显示新内容
12-27
css+js实现鼠标经过图片后,图片变背景图,显示新内容，css鼠标经过换内容，原先的内容隐藏或者作文背景。css鼠标经过内容切换的实现方法
鼠标滑过，换背景
azhzf1172的博客
10-22 81
1 ar box = document.getElementById("box"); 2 function fn(liid,bg){ // 封装函数 参数的传递 3 var obj = document.getElementById(liid); 4 obj.onmouseover = function(){ 5 box.styl...
CSS实现鼠标移动到图片,更换图片,两种方
jack_rose_me的博客
11-20 3154
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>CSS实现鼠标移动到图片,更换图片,两种方式</title> <style> .img-1a:link{ display:block; width:200px; ...
纯CSS实现鼠标移动切换图片示例
09-25
在这个例子中，我们将探讨如何使用纯CSS来实现一个鼠标移动时切换图片的特效。这个技术在以前通常依赖JavaScript，但随着CSS3的引入，我们有了更多无需JavaScript就能创建动态效果的可能性。以下是如何实现这个功能...
div+css实现鼠标放上去，背景跟图片都会变化。
10-30
在 DIV+CSS 中实现鼠标悬停效果，可以实现在鼠标悬停时背景图片和颜色的变化。这是交互设计中非常重要的一部分，能够提高用户体验和网站的整体美观度。 在 HTML 中，我们使用了无序列表 `<ul>` 和列表项 `<li> `来...
CSS实现鼠标滑过鼠标点击代码写法
09-27
CSS（层叠样式表）作为一种强大的样式语言，能够帮助我们实现各种视觉效果，包括鼠标滑过和鼠标点击时元素样式的动态变化。本文将深入探讨如何使用CSS来实现这些功能。 首先，我们需要理解CSS中的两个关键选择器：`...
CSS控制当鼠标滑过时更换图片的效果
09-25
当鼠标悬停在链接上时，`a:hover`伪类会触发，改变背景图片为`wall_s2.jpg`，实现图片的切换效果。 最后，`a:active`伪类用于处理链接被点击时的样式： ```css .nav ul li a:active { background: url(/jscss/...
VUE.JS 实现图片随鼠标变换的动画效果
luoxuebinfei的博客
02-27 2937
先来看演示效果 首先我们设置一个这样的图片样式 <template> <div class="login100-pic"> <img src="../static/images/img-01.png" alt="IMG"/> </div> </template> <style> .login100-pic { width: 316px; } .login100-pic img { max
vue项目中鼠标悬浮图片实现hover效果切换图片-案例
JackieDYH的博客
05-25 7703
1、使用css实现鼠标滑动切换图片效果 <ul class="ullist"> <li class="img1"> <img src="../assets/image/icon/ic1.png" alt="" /> </li> <li class="img2"> <img src="../assets/image/icon/ic2.png" alt="" /> </li> <li cla..
css修改input选中时背景色
最新发布
qq_42617840的博客
05-16 1069
css修改input选中时背景色
css怎么随着鼠标移动,利用CSS sprites制作随着鼠标移动的动画背景
weixin_39562089的博客
08-03 1605
网页设计中的背景图是至关重要的，在之前的文章《网页设计中的背景创意和发展趋势》也有为大家分享过网页设计中关于背景的设计以及发展趋势，一个优秀的背景图可以为你的网站增添不少的精彩。在浩大的互联网中，各种创意层出不穷，也许你在一些网站上看到的背景会随着鼠标的移动而移动，这是非常充满创意而且有趣的设计，你认为呢？今天就为大家分享下如何制作一个随着鼠标移动的动画背景效果。在开始制作动画背景效果前，先为大家...
CSS代码鼠标经过图片变换图片
热门推荐
php菜鸟技术天地
11-17 1万+
<img src="#" name="picture" width="330" height="210" border="0" align="middle" onMouseOver="this.src='#'" onMouseOut="this.src='#'">
css效果(1)-背景模糊，倒影，文字凸起，文字凹陷
ygkyufcl的博客
02-23 544
背景模糊 backdrop-filter: saturate(180%) blur(1em); -webkit-backdrop-filter: saturate(180%) blur(1em); 倒影 -webkit-box-reflect: below -60px -webkit-gradient(linear,right 60%,right bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.3))); 文字凸起 text-shadow: 1px 1
【操作】鼠标hover效果——元素凸起并产生阴影
微信公众号: 后端码匠
07-11 909
.hover:hover { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0 0 6px #999; box-shadow: 0 0 6px #999; -webkit-transition: all .5s ease-out; transition: all
css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
weixin_34564735的博客
08-04 1944
我们经常看到的网站基本上都有导航菜单，有的网站看上去非常酷，鼠标一移动到上面自动改变颜色，这样的导航有两种方法可以实现：一种是鼠标经过图像，一种是CSS定义。鼠标经过图像是把菜单做成两张文字相同但颜色或图案不一样的图片，当鼠标滑过时就自动切换图片，这样的导航菜单优点是色彩丰富，可以做得相当炫酷，缺点是图片中没有实质文字，不利于搜索优化，在一些CMS系统中使用起来也不是很方便。CSS定义鼠标滑过导航...
CSS实现鼠标经过div时改变背景图片
斯维特哈特
09-19 1万+
很多时候我们都能够看到，当我们用鼠标滑过div时，div的背景将会变成另外一个图片。下面我就将实现该功能的代码分享出来，希望能够帮助到大家。 .biankuang { height: 126px; width: 15%; margin-left: 14px; margin-top: 20px; background-image: url(bj1.png...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值