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. Webhook是什么、怎么理解

    Webhook是什么 我们想看看维基老大的解说: A webhook in web development is a method of augmenting or altering the beha ...

  2. [转]微信小程序、微信公众号、H5之间相互跳转

    本文转自:https://www.cnblogs.com/colorful-paopao1/p/8608609.html 转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加 ...

  3. MFC框架之线程局部存储

    线程局部存储中用到的API基础:(TLS:Thread Local Storage) 1.在主线程中申请索引 g_index=::TlsAlloc(); 2.在线程函数中使用索引 存值:::TlsSe ...

  4. jquery完成界面无刷新加载登陆注册

    昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击! ...

  5. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...

  6. ADO.NET 【攻击及防御】

    sql字符串注入攻击 SQL注入攻击是黑客对数据库进行攻击的常用手段之一.SQL注入的手法相当灵活 SQL注入攻击会导致的数据库安全风险包括:刷库.拖库.撞库. 一般来说,SQL注入一般存在于形如:H ...

  7. leetcode实践：通过链表存储两数之和

    题目: 两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字.如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的 ...

  8. 【JVM】4、JVM类加载机制

    一.先看看编写出的代码的执行过程: 二.研究类加载机制的意义 从上图可以看出,类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行. 研究类 ...

  9. CentOS总结归纳之基本操作（linux系管与运维一）

    原创作品,转载请在文章明显位置注明出处:https://www.cnblogs.com/sunshine5683/p/10170009.html 使用命令关闭和重启系统: 一.条件:只有root用户才 ...

  10. POJ1741(SummerTrainingDay08-G 树的点分治)

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 23380   Accepted: 7748 Description ...