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. VM虚拟机克隆_修改网络

    1.如果网络中没有VMware的网卡,记得重置即可 2.如果右上角没有了网络图标,直接 server NetworkManager restart 3.网络配置 1)在/etc/sysconfig/n ...

  2. python协程的简单了解

    协程: 协程,又称微线程,纤程.英文名Coroutine. 可以在不同的函数间切换,而且切换的次数和时间都是由用户自己确定的. 协程的几种实现方式: (1)使用生成器yield实现. 如果不了解生成器 ...

  3. mongodb基础环境搭建

    一.准备工具 (1)mongodb(https://www.mongodb.com/dr/fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus- ...

  4. 如何在Oracle数据库中查看哪些用户在执行哪些SQL

    对于DBA来说,这是一个非常常见的问题,DBA需要找出以下问题: 1.哪些用户在跑哪些SQL? 2.一个特定的SQL是被哪个用户在执行? 3.一个特定的用户在跑哪些SQL? 从这些问题中可以很明显的看 ...

  5. 自定义适用于手机和平板电脑的 Dynamics 365(一)：主页

    当用户首次打开适用于手机和平板电脑的 Dynamics 365 时,他们将看到默认为“销售仪表板”的主页. 您可以创建新仪表板或 Web 应用程序中编辑现有仪表板,然后为移动设备启用它们,用户可以选择 ...

  6. JSP源码、改写Servlet为JSP、查看转译成为Servlet的文件、JSP字符编码设置

    概述 在Servlet中编写HTML太麻烦了,应该使用JSP.JSP中可以直接编写HTML,使用指示.声明.脚本(scriptlet)等元素来堆砌各种功能,但JSP最后还是会被容器转译为Servlet ...

  7. svn目标计算机主动拒绝

    这两天上传文件到服务器端,总是提示“ 目标计算机主动拒绝”. 后来排查,是受到360杀毒软件的文件系统实时防护功能影响. 虽然服务器端已经将仓库目录添加进360杀毒的白名单,但随着用户不断更新文件,文 ...

  8. VMWare12虚拟机实现主客机间的文件拖拽（复制粘贴）和文件夹共享

    版本: 主机:Windows 7 64位旗舰版 虚拟机: VMWare 12 + Windows 7 64位旗舰版 VMWare pro 12 + Ubuntu16.04LTS 64位 注:由于VMW ...

  9. 控制台输出 mybatis 中的sql语句

    控制台输出 mybatis 中的sql语句 在 log4j.xml 文件中 增加如下配置 <!-- mybatis 输出的sql,DEBUG级别 --> <logger name=& ...

  10. Azure 门户中基于角色的访问控制入门

    面向安全的公司应侧重于向员工提供他们所需的确切权限. 权限过多,可能会向攻击者公开帐户. 权限太少意味着员工无法有效地完成其工作. Azure 基于角色的访问控制 (RBAC) 可通过为 Azure ...