• css+div及javascript应用鼠标经过时图片变换的两种方法


    不管是鼠标经过超链接还是经过层,都可以实现

    javascript方式    熟悉使用document.getElementById()取得节点对象

    <!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>
    <style>
    .div_n
    {
    width
    :300px;
    height
    :250px;
    border
    :1px solid gray;
    }
    </style>
    <script type="text/javascript">
    function changeSrc1()
      {
      document.getElementById(
    "myImage").src="/images/2.gif"
      }
    function changeSrc2()
      {
      document.getElementById(
    "myImage").src="/images/1.gif"
      }
    </script>
    </head>

    <body>
    <div class="div_n">
    <href="http://www.baidu.com">
    <img id="myImage" src="/images/1.gif"  onmouseover="changeSrc1()" onmouseout="changeSrc2()"/>
    </a>
    </div>
    </body>

    </html>


    css+div方式:  合理控制层的样式

    <!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>
      <style>
        .main
    {
            width
    :300px;
            height
    :250px;
            border
    :1px solid gray;
        
    }
        .content
    {
            width
    :150px;
            height
    :160px;
            border
    :1px solid gray;
            background-image
    :url(images/2.gif);
            background-repeat
    : no-repeat;
        
    }
        .content:hover
    {
            background-image
    :url(images/3.jpg);
        
    }
        a
    {
            text-decoration
    :none;
        
    }
      
    </style>
     </head>

     <body>
      <div class="main">
        <href="http://www.baidu.com/"><div class="content"></div></a>
      </div>
     </body>
    </html>
  • 相关阅读:
    电子电路基础复习 —— 电阻
    Linux 网络编程(IO模型)
    Linux 2.6 源码学习-内存管理-buddy算法
    【转】MySQL性能优化的21个最佳实践
    linux 2.6 驱动笔记(三)
    linux 2.6 驱动笔记(二)
    公共代码参考(httpclient)
    linux 2.6 驱动笔记(一)
    bzoj 2401: 陶陶的难题I 数论
    bzoj 3144: [Hnoi2013]切糕 最小割
  • 原文地址:https://www.cnblogs.com/wengfumin/p/2324279.html
Copyright © 2020-2023  润新知