关于css控制鼠标滑过时的效果

问题描述

<tdonMouseOver="this.style.background='#ff6600'"onMouseOut="this.style.background='#CCCCCC';"bgcolor="#CCCCCC"></td>

上面的代码是鼠标滑过时候表格背景色变化,离开的时候会恢复默认的背景色。我现在有个问题,就是上面这段代码。因为我的背景是图片。所以上面关于背景色的地方我该如何改成图片的形式呢。background='#ccccc'这里应该是图片地址

解决方案

解决方案二:
楼主运行...图片自己找吧<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><body><divonMouseOver="this.style.backgroundImage='url(1.jpg)'"onMouseOut="this.style.backgroundImage='url(2.jpg)';"style="width:400px;height:300px;"></div></body></html>

解决方案三:
<tableborder=1><tr><tdonMouseOver="this.background='img1.jpg'"onMouseOut="this.background='img2.jpg'"bgcolor="#CCCCCC"style="width:626px;height:204px;"></td></tr></table>

时间: 2024-10-28 23:45:49

关于css控制鼠标滑过时的效果的相关文章

JS+CSS实现鼠标滑过时动态翻滚的导航条效果_javascript技巧

本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

巧用CSS控制鼠标样式变换

css|控制|鼠标样式 主页上的鼠标是不是就只有箭头和小手两种模样呢?如果鼠标移到"帮助"等字样上时,形状就变成求助的问号:鼠标移到可能需要较长时间等待的超链接时,鼠标形状就变成等待的样子--那该多好啊! 其实,借助我们的css,几句很简单的代码就可以实现这一切! 不信?把鼠标移到下面的演示文字上看看效果吧! 演示:手形 源代码:<P style="CURSOR: hand">演示:手形</P> 演示:移动 源代码:<p style=c

javascript-怎样用js实现鼠标滑过时整行变色

问题描述 怎样用js实现鼠标滑过时整行变色 要在一览画面里实现当鼠标滑过时整行变色,想问问用Js怎么实现? 解决方案 如果是table,就在mousedown的时候获取当前焦点的元素,判断是不是tr,如果是tr则设置style.在mouseup的时候移除style.其他的话就是其他的办法了 解决方案二: function overIt(){ var the_obj = event.srcElement; if(the_obj.tagName.toLowerCase() == "td")

CSS控制超链接出现指定的效果

要求: (1) 默认样式是黑色,24px,没有下划线: (2) 当鼠标移动到超链接时,自动出现下划线,字号变为40px,颜色变为绿色: (3) 点击后,超链接变成红色 html页面内容: <html> <head> <title>CSS控制超链接的例子</title> <link rel="stylesheet" type="text/css" href="test.css" /> &l

css实现鼠标滑过改变文字(中文变英文)

鼠标滑过改变文字的效果想必很多朋友都有遇到过吧,本文为大家介绍下css是如何实现的,感兴趣的朋友可以了解下   复制代码 代码如下: <!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/1

CSS3实现京东图片鼠标滑过流光效果

京东首页从1F开始,左侧大图都有一个很有意思的效果,当你的鼠标滑过图片时,会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果.相较于淘宝的蒙版效果,个人感觉流光效果更好看一些.因此,本站一些图片也采用了这种流光效果,具体可鼠标滑过博文封面图预览. 流光效果实现起来很简单,主要是利用css3的线性渐变(linear-gradient),2D转换(transform)以及倾斜(skew)配合hover来实现,当然如果想要兼容一些低版本浏览器,可以使用图片代替.因此,结构相对简单,只需要

CSS实现鼠标滑过鼠标点击的教程

鼠标滑过元素,使得元素的样式发生改变 我们定义一个按钮标签 代码如下: <button class="px-button">BUTTON</button>   我们首先设置按钮的背景颜色为灰色: 代码如下: .px-button{ background-color: grey; }   我们要使得鼠标滑过按钮的时候,让其变为蓝色,我们只需要增加hover选择器: 代码如下: .px-button:hover{ background-color: blue; }

用css filter做鼠标滑过图片效果_经验交流

css 控制鼠标显示样式示例

鼠标的显示样式可以在css里进行友好的控制,下面整理了一些鼠标的样式类型,感兴趣的朋友可以参考下,希望对大家学习css有所帮助     复制代码 代码如下: <span style="cursor:*">文本</span> 然后*换成下面的一种就行: hand 手型 crosshair 十字型 text 移动到文本上的那种效果 wait 等待的那种效果 default 默认效果 help 问号 e-size 向右的箭头 ne-resize 向右上的箭头 n-re