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. 几种流行的AJAX框架对比：Jquery，Mootools，Dojo，ExtJs，Dwr

    1:Jquery 主页:http://jquery.com/ 设计思想:简洁的方案思想,几乎所有操作都是以选择DOM元素(有强大的Selector)开始,然后是对其的操作(Chaining等特性). ...

  2. 简明log4j配置教程

    先准备好log4j需要对应的开发包: apache-log4j-extras-1.2.17.jar slf4j-api-1.6.1.jar slf4j-log4j12-1.6.1.jar 然后就是在项 ...

  3. 批处理REG学习

    首先在批处理操作注册表之前,应该了解REG命令的使用方式,详情请参阅一下网址: https://www.jb51.net/article/30078.htm 从以上链接内容我们可以详细了解使用reg的 ...

  4. Java 强制类型转换

    java提高篇(十一)-----强制类型转换 在java中强制类型转换分为基本数据类型和引用数据类型两种,这里我们讨论的后者,也就是引用数据类型的强制类型转换. 在Java中由于继承和向上转型,子类可 ...

  5. zsh: command not found cnpm,gulp等命令在zsh终端上报错的问题

    以cnpm包为例,使用 npm install -g cnpm 创建了cnpm包.而在zsh终端上运行cnpm,出现 zsh: command not found: cnpm 的报错.同样的,gulp ...

  6. JS 提升 p4

    提示不多说,记住几个要点: 1.变量和函数都会提升,如下 a = 2; var a ; console.log(a); fn(); function fn(){ console.log(1); } 2 ...

  7. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  8. vue-scroller记录滚动位置

    问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的bef ...

  9. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  10. dubbo 图片服务器（FastDFS） redis solr ActiveMQ等简单配置使用

    一.dubbo 项目基于soa的架构,表现层和服务层是不同的工程.所以要实现商品列表查询需要两个系统之间进行通信. 1.1如何实现远程通信? 1.Webservice:效率不高基于soap协议.项目中 ...