HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS鼠标经过另类做法</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body> <dl>
<dd><a href="###" class="item1"></a></dd>
<dd><a href="###" class="item2"></a></dd>
<dd><a href="###" class="item3"></a></dd>
<dd><a href="###" class="item4"></a></dd>
<dd><a href="###" class="item5"></a></dd>
<dd><a href="###" class="item6"></a></dd>
<dd><a href="###" class="item7"></a></dd>
<dd><a href="###" class="item8"></a></dd>
<dd><a href="###" class="item9"></a></dd>
</dl> </body>
</html>

CSS

dl,dd {
margin:;
padding:;
}
dl {
width:300px;
height:300px;
background:url(../images/menu_gray.jpg) no-repeat;
}
dl dd {
width:100px;
height:100px;
float:left;
}
dl dd a {
width:100px;
height:100px;
display:block;
background:url(../images/menu_color.jpg) no-repeat -9999px -9999px;
}
dl dd a.item1:hover {
background-position:0 0;
}
dl dd a.item2:hover {
background-position:-100px 0;
}
dl dd a.item3:hover {
background-position:-200px 0;
}
dl dd a.item4:hover {
background-position:0 -100px;
}
dl dd a.item5:hover {
background-position:-100px -100px;
}
dl dd a.item6:hover {
background-position:-200px -100px;
}
dl dd a.item7:hover {
background-position:0 -200px;
}
dl dd a.item8:hover {
background-position:-100px -200px;
}
dl dd a.item9:hover {
background-position:-200px -200px;
}

效果图:

CSS鼠标经过另类做法的更多相关文章

  1. CSS鼠标响应事件经过、移动、点击示例介绍

    本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS.鼠标移动CSS.鼠标点击CSS以及示例,喜欢的朋友可以参考下   几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onM ...

  2. css 鼠标移动到按钮图片改变;图片换层;鼠标放上透明度改变直到隐藏;

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  3. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  4. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  5. html css鼠标样式,鼠标形状

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  6. CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  7. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  8. CSS鼠标效果手型效果

    Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Exam ...

  9. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

随机推荐

  1. 自动加载的iframe高度自适应

    动态产生iframe,自动加载至body中,还有一个功能就是iframe的高度自适应,下面代码测试于IE和Firefox,Chrome:

  2. Spring基础(6) : 普通Bean对象中保存ApplicationContext

    public class Person implements ApplicationContextAware{ ApplicationContext context; public String na ...

  3. Linux-mkdosfs格式化磁盘命令(15)

    名称:mkdosfs 使用:mkdosfs [块设备名称] 说明: 将一个块设备格式化为DOS磁盘类型 例: mkdosfs /dev/memblock //将memblock块设备格式化为dos磁盘 ...

  4. 【JVM】3、JVM问题查找

    1.查看tomcat进程号 两种方式都可以查看tomcat进程号 ps -ef | grep tomcat-web jps -lmvV |grep tomcat-web 结果如下:2556 2.查看进 ...

  5. Elasticsearch Query DSL 整理总结(三)—— Match Phrase Query 和 Match Phrase Prefix Query

    目录 引言 Match Phase Query slop 参数 analyzer 参数 zero terms query Match Phrase 前缀查询 max_expansions 小结 参考文 ...

  6. Java - "JUC线程池" Callable与Future

    Java多线程系列--“JUC线程池”06之 Callable和Future Callable 和 Future 简介 Callable 和 Future 是比较有趣的一对组合.当我们需要获取线程的执 ...

  7. 【 js 基础 】为什么 call 比 apply 快?

    这是一个非常有意思的问题. 在看源码的过程中,总会遇到这样的写法: var triggerEvents = function(events, args) { var ev, i = -1, l = e ...

  8. 集合框架二(Collection接口实现类常用遍历方法)

    四种常用遍历方式 Collection coll = new ArrayList(); coll.add("123"); coll.add("456"); co ...

  9. lamp配置多个虚拟站点

    在同一ip下添加多个域名站点! 1.查看ip 命令:ifconfig 2.添加域名 命令:vi /etc/hosts 输入域名:如 192.168.160.127   www.test.com 192 ...

  10. 更多内容 - 请关注我的 CSDN 博客

    欢迎关注我的 CSDN 博客 因为粉丝多数是在 CSDN 上,所以更多内容放在了 我的 CSDN 博客: [点击跳转] 地址:https://icode.blog.csdn.net