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. jQuery显示SQL存储过程自定义异常信息

    学习MVC应用开发,改变了Insus.NET以前ASP.NET的开发习惯,以前开发均是服务器端,而现在使用jQuery的Ajax在实现.想到与考虑了很多问题,也遇上很多问题,一些解决了,一些还留下,望 ...

  2. C# 数组深拷贝

    数组深拷贝,即完全复制出一份新的数组,两个数组内容完全相同. 一般有四种方法: 1. 循环遍历复制 2. 数组的成员方法:CopyTo CopyTo方法用作将源数组全部拷贝到目标数组中,可以指定目标数 ...

  3. Android Interpolator（插值器）

    1.概述 插值器定义如何计算动画中的特定值作为时间的函数.例如,指定动画在整个动画中线性发生,这意味着动画在整个时间内均匀移动,或者指定动画以使用非线性时间,例如,在开始或结束时使用加速或减速动画. ...

  4. 设计模式之工厂模式（Factory）（3）

    在面向对象编程中,最通常的方法是一个new操作符产生一个对象实例,new操作符就是用来构造对象实例的.但是在一些情况下,new操作符直接生成对象会带来一些问题.举例来说,许多类型对象的创造需要一系列的 ...

  5. ORM中自定义一个char类型字段

    自定义一个char类型字段 class MyCharField(models.Field): """ 自定义的char类型的字段类 """ ...

  6. Unix环境高级编程：fork, vfork, clone

    fork fork产生的子进程是传统意义上的进程,fork之后执行路径就互不关联了,一旦fork返回后面的代码就在不用的进程上下文中执行了.到底是子进程先执行还是父进程先执行一般是随机的或者依赖实现的 ...

  7. Code Signal_练习题_Circle of Numbers

    Consider integer numbers from 0 to n - 1 written down along the circle in such a way that the distan ...

  8. element-ui Pagination组件源码分析整理笔记（七）

    element-ui源码的版本是2.4.9 pagination.js import Pager from './pager.vue'; import ElSelect from 'element-u ...

  9. element-ui Message组件源码分析整理笔记（八）

    Message组件源码: main.js import Vue from 'vue'; import Main from './main.vue'; import { PopupManager } f ...

  10. Java基础笔记(2) 程序入口 关键字 标识符 常量 变量

    提醒:关于那些和我一样新鸟来看资料的,能看懂多少看多少,看不懂的就是不重要,重要的你想我自己学习肯定要标注的,这些信息明白每个知识点实际作用就好了,其他的比如等会讲的常量内存,常量池这些都是我找的资料 ...