CSS+JS控制鼠标滑向表格变换背景图片代码

最新推荐文章于 2024-10-01 23:20:42 发布
最新推荐文章于 2024-10-01 23:20:42 发布
阅读量5.2k 收藏
点赞数
分类专栏： html & js 文章标签： css url border

html>

<head>

<title>CSS+JS控制鼠标滑向表格变换背景图片代码 - www.webdm.cn</title>

<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<body>

<table border="1">

  <tr>

<td style="background-image:url('http://www.webdm.cn/images/20091015/bgdemo2.jpg');width:300;height:300;" οnmοuseοver="this.style.backgroundImage='url(http://www.webdm.cn/images/20091015/bgdemo3.jpg)'" οnmοuseοut="this.style.backgroundImage='url(http://www.webdm.cn/images/20091015/bgdemo2.jpg)'">

ddd</td>

  </tr>

</table>

</body>

</html>

 

 

<br>

<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

为乐.rookie
关注
专栏目录
鼠标滑过时变换背景色的方法（div+css）
u011355117的专栏
10-24 548
实现鼠标经过背景变色的方法有很多，今天我们介绍的是用CSS+DIV实现的方法。 方法一: #div:hover{background:#000000;} 例如： #item:hover {background-color:#000000;}  item为div的id 解释:鼠标经过id为div的元素时背景变色 IE6.0、Firefox2
js实现鼠标滑入滑出背景透明度改变
sunnyfan的博客
12-20 2998
js实现鼠标滑入滑出背景透明度改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分享</title> </head> <style type="text/css"> body{padding:0;margin:0;} #n_content{width:200px;heigh
html css 鼠标移动位置,在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)...
weixin_39957835的博客
06-04 1081
映射鼠标位置或实现拖拽效果，我们可以在 JavaScript 中做到这一点。但实际上，在CSS中有更加简洁的方法，我们可以在不使用JavaScript 的情况下，仍然可以实现相同的功能！只使用CSS就可以实现模仿鼠标"点击和拖动"效果，让我们来看看如何获得用户的鼠标位置，并将其映射到 CSS 自定义属性：--positionX 和 --positionY 中。下面是具体实现步骤。初始化我们的第一个...
HTML +CSS 语法
CSSAJBQ_的博客
03-04 3152
HTML 1.html基本结构 <!DOCTYPE html> 声明当前的html文档是 html5 <html></html> 根标签（根节点） 一个网页中只有一个 <head></head> 头部标签 放页面的一些描述信息 <meta> 描述 charset="UTF-8" 告诉浏览器这个文档编码格式是UTF-8 <title></title> 告诉浏览器 当前网页的标题
HTML+CSS（PC端+移动端）
qq_57003087的博客
06-01 5597
HTML+CSS基础（PC端+移动端）
个人前端学习笔记 html5+css（保持更新）
qq_43769855的博客
07-07 831
个人前端学习知识（html5+css）
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
Web开发之css
weixin_58487644的博客
08-25 363
CSS全称为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化
前端面试经典题目合集（HTML+CSS）
Alan_1550587588的博客
06-16 1457
(整理自网络，侵删)1、浏览器页面有哪三层构成，分别是什么，作用是什么?       构成：结构层、表示层、行为层       分别是：HTML、CSS、JavaScript       作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。2、HTML5的优点与缺点？优点：        a、网络标准统一、HTML5本身是由W3C推荐出来的；  ...
CSS学习笔记
YuKing_HONG的博客
10-17 1456
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
HTML+CSS 学习笔记
wc777777的博客
10-09 936
一、什么是html？ 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 1. 网页的组成 网页的三要素：结构html，表现css，行为js 2. Html发展史 HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。 HTML2.0，在1995年HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的。 HTML3
CSS画出三角形的做法
最新发布
mingangel的博客
10-01 133
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
如何用JavaScript编写一个简单的计数器
Jiaberrr的博客
10-01 231
在网页开发中，计数器是一种常见的功能，它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。
CSS 的pointer-events属性，控制元素如何响应用户指针事件
读心悦
09-25 732
CSS中的属性是一个用于控制元素如何响应用户指针事件（如鼠标点击、触摸等）的重要属性。这个属性可以应用于任何HTML元素，以决定元素是否能够捕获和响应用户的交互事件。以下是关于。
【H2O2|全栈】关于CSS（7）CSS基础（六）
过期的H2O2的博客
09-26 1445
本系列博客将分享层叠样式表（CSS）有关的知识点。本期主要分享元素显示隐藏、透明度、溢出属性、滚动条、居中布局以及网页的部分结构的编写方法。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。
23 vue3之详解scoped&样式穿透&vuecss新特性
qq_37550440的博客
09-27 113
PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果.vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。Vue 提供了样式穿透:deep() 他的作用就是用来改变。
JS+CSS控制鼠标移上图片滑出文字提示代码
05-10
可以使用CSS的`:hover`伪类和`content`属性来实现鼠标移上图片滑出文字提示效果。 HTML代码： ```html <div class="image-wrapper"> <img src="your-image-url" alt="your-image-description"> <div class="image-description">Your image description</div> </div> ``` CSS代码： ```css .image-wrapper { position: relative; display: inline-block; } .image-description { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; text-align: center; padding: 10px; opacity: 0; transition: opacity 0.3s ease; } .image-wrapper:hover .image-description { opacity: 1; } .image-wrapper img { display: block; max-width: 100%; height: auto; } .image-wrapper img:hover { opacity: 0.7; } ``` 解释一下代码： 首先，我们把图片和文字描述放到一个外层容器`<div class="image-wrapper">`中，让它们在一起。 然后，我们给外层容器设置`position: relative;`，让内部的文字描述能够基于这个容器定位。 接着，我们给文字描述设置`position: absolute;`，让它基于外层容器底部左侧定位，并且设置`opacity: 0;`，让它一开始不可见。 接下来，我们使用`:hover`伪类来控制文字描述的显示，当鼠标移上外层容器时，文字描述的`opacity`属性变为1，即可显示出来。 最后，我们还可以给图片设置`opacity`属性，让它在鼠标移上时半透明显示效果，增加交互感。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值