• 技术文章 >web前端 >css教程

    css怎么设置鼠标变背景

    藏色散人藏色散人2020-11-17 11:03:28原创35

    css设置鼠标变背景的方法:首先打开相应的前端代码文件;然后设置样式为“.logo-link {background-image:url(...);}.logo-link:hover,.logo-link:active {}”即可。

    推荐:《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>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <style type="text/css">
      .logo-link {
    width:500px;
    height:500px;
    text-decoration:none;
    display:block;
    background-image:url(bj1.jpg);
    background-position:0px 0;
    background-repeat: no-repeat;
      }
      .logo-link:hover,.logo-link:active {
    background-position:0 0;
    background-image: url(bj2.jpg);
      }
      </style>
     </head>
     <body>
    <a href="http://www.baidu.com" class="logo-link"></a>
     </body>
    </html>

    以上就是css怎么设置鼠标变背景的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css怎么设置超链接字体加粗效果 下一篇:chrome开发者工具怎么查看css代码
    第14期线上培训班

    相关文章推荐

    • css怎么设置不能选中文字• css3如何实现颜色渐变效果• css怎么设置段落缩进• dw怎么显示css效果

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网