div+css实现鼠标放上去，背景跟图片都会变化。

New Document

ul{
list-style:none;
}
a{
padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none;
}
a:link,a:visited{
background:url(/article/upimages/bbs_bg_off.gif);
}
a:hover,a:active{
background:url(/article/upimages/bbs_bg_on.gif);
}

  • 移动背景变换
  • 移动背景变换
  • 移动背景变换
  • 移动背景变换
  • 移动背景变换

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 超强推荐CSS打造经典鼠标触发显示选项

    css打造鼠标触发效果 找什么 会计 网页设计 翻译 家教 更多>> 在那里 北京 上海 广州 深圳 南京 天津 杭州 成都 重庆 武汉 西安 沈阳 更多城市>> 高级搜索 分类搜索 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 鼠标移入移出改变CSS样式的小例子

    网页上的某个区域,当鼠标移入时改变样式,鼠标移出时自动恢复样式,可以是一个图片的边框,也可以一段文字变色,掌握了原理,貌似可以做更加丰富生动的网页互动效果,这里主要是利用Js控制Hover标签所在的DIV产生动作,也是学习的好范例. 鼠标移入移出改变CSS样式 body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;borde

  • 纯CSS实现鼠标放上去改变文字内容

    css样式 复制代码 代码如下: .remind span {display:block;margin-top:-22px;}.remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;} html代码 复制代码 代码如下: <div class="remind&

  • 一点小小的创意css鼠标放上去则显示电话号码

    一点小小的创意css鼠标放上去则显示电话号码

    1, default: 2,鼠标移上去:来源: 今天在同事的手机的电话薄里面发现的,发现他存的电话号码都是显示名字,然后只要往下移动,就能显示这个人的相应的号码.       然后自己就在想,这还满不错的嘛.于是就想到以前好象收藏过类似的效果. 稍微改下.      总结:生活中的发现无处不在,能够善于发现,然后勤于思考.联想,这样的确是个优点 . comasp's blog a{ color: #FFFF99; text-decoration: none; }a:hover{ color: #

  • div+css实现鼠标放上去，背景跟图片都会变化。

    New Document ul{ list-style:none; } a{ padding-left:1.5em;font-size:12px;height:23px;line-height:23px;color:gray;text-decoration:none; } a:link,a:visited{ background:url(/article/upimages/bbs_bg_off.gif); } a:hover,a:active{ background:url(/article/u

  • jquery鼠标放上去显示悬浮层即弹出定位的div层

    复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!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">

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里

    常用的DIV+CSS的基本框架结构但不推荐都放一个div里css样式代码:  程序代码 复制代码 代码如下: /*---全局样式---*/  * { margin:0px; padding:0px;}  body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;background:#fff;} /*---主体样式---*/  #container {}  .clearfloat {clear:both;he

  • js+html+css实现鼠标移动div实例

    js: 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p

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

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

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

  • DIV+CSS经常用到的属性、参数及说明

    通用类 overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围 !important 指定样式规则的应用优先权 文字类 color: #FF0000;文字颜色 font-family: "Arial", "Helvetica", "sans-serif";字体 font-size: 9px;字号 text-align:center; 居中(left为居左,right为居右) line-height:28px:行高(可用150%

  • jquery 文本上下无缝滚动,鼠标放上去就停止 小例子

    复制代码 代码如下: <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript">               function AutoScroll(obj) {            $(obj).find("ul:first").anima

随机推荐