zoukankan      html  css  js  c++  java
  • CSS控制当鼠标滑过时更换图片的效果

    鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现。<!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实现鼠标移动到图片,更换图片---www.jbxue.com</title> 
    </head> 
    <style type="text/css"> 
    *{ margin:0; padding:0;} 
    ul li{ list-style:none;} 
    .nav{ 800px; height:40px; margin:150px auto;} 
    .nav ul li{ float:left; 200px;} 
    .nav ul li a:link,a:visited{ display:block; 190px; height:40px; background:url(/jscss/demoimg/wall_s1.jpg);}/*链接、点击后*/ 
    .nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}/*鼠标经过*/ 
    .nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}/*点击时*/ 
    </style> 
    <body> 
    <div class="nav"> 
    <ul> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
    </ul> 
    </div> 
    </body> 
    </html> 
  • 相关阅读:
    Vue 02
    Vue 初识
    复杂数据类型之函数 对象
    Collections工具类
    遍历集合的方法总结
    使用Iterator迭代器遍历容器元素(List/Set/Map)
    TreeSet的使用和底层实现
    HashSet基本使用
    HashSet底层实现
    TreeMap的使用和底层实现
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3366315.html
Copyright © 2011-2022 走看看