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. [转]MSSQL中利用TOP提高IF EXISTS查询语句的性能

    本文转自:https://blog.csdn.net/f_r_e_e_x/article/details/51704784 --有可能返回一条或多个结果集,其实我们只需要知道是否 --有数据即可,这样 ...

  2. MVC会员注销功能Cookie的应用

    我们实现了<MVC应用程序实现会员登录功能>http://www.cnblogs.com/insus/p/3466512.html 有登录就会有注销功能.此次Insus.NET练习一个MV ...

  3. Spring Security认证配置(一)

    学习本章之前,可以先了解下上篇 Spring Security基本配置. 本篇主要讲述Spring Security基于表单,自定义用户认证配置(上篇中的配置,本篇将不再阐述).一共分为三步: 1.处 ...

  4. IntelliJ IDEA 2016.2 注册破解激活教程

    下载了IntelliJ IDEA 尽然需要激活,整了终于找到解决的办法了,记录下来. IntelliJ IDEA 2016.2下载地址:http://www.jetbrains.com/idea/do ...

  5. 2018 Google SEO 需要注意的点

    1.RankBrain 是一种机器学习系统 - 会根据用户的行为进行,对网站排名. 用户在你的网页上停留多久(用户停留时长) 多大比例的用户点击了你的网页(点击率) Note: 之前Google 开发 ...

  6. 了解java虚拟机—并行回收器（7）

    并行回收器 新生代ParNew回收器 ParNew只是简单地将串行回收器多线程化,他的回收策略,算法以及参数都喝新生代串行回收器一样.由于并行回收器使用多线程进行垃圾回收,因此,在并发能力强的CPU上 ...

  7. 【Winform系列】Winform控件DataGridView添加数据的几种方式

    1:直接添加 在控件中设置好每列的名称 例如: DataGridViewRow row = new DataGridViewRow(); int j = dgv.Rows.Add(row); dgv. ...

  8. numpy练习题

    1. 导入numpy库并简写为 np import numpy as np 2. 打印numpy的版本和配置说明 print(np.__version__) print(np.show_config( ...

  9. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  10. 通过代码动态创建Windows服务

    开发完Windows服务后,一般通过如下命令进行注册Windows服务 @echo off %SystemRoot%\Microsoft.NET\Framework64\v4.0.30319\inst ...