鼠标透过图片时变成另外一张-HTML教程-爱易网页

鼠标透过图片时变成另外一张

日期：2014-05-17　浏览次数：20622 次

鼠标经过图片时变成另外一张
想实现鼠标经过图片时显示另外一张图片，鼠标离去后显示另一张图片，
如下代码



<head runat="server">



    <title>无标题页</title>    



   <style>

      .sy{background-image:url(Image/menusy.jpg);}



      .sy1{background-image:url(Image/menuOnSY.jpg);}



      .zj{background-image:url(Image/menuGSGK.jpg);}



      .zj1{background-image:url(Image/menuOnGSGK.jpg);}



      .xw{background-image:url(Image/menuNews.jpg);}



      .xw1{background-image:url(Image/menuOnNews.jpg);}



      .cp{background-image:url(Image/menuCPZS.jpg);}



      .cp1{background-image:url(Image/menuOnCPZS.jpg);}



      .zs{background-image:url(Image/menuJSZR.jpg);}



      .zs1{background-image:url(Image/menuOnJSZR.jpg);}



 



      .rc{background-image:url(Image/menuGYKF.jpg);}



      .rc1{background-image:url(Image/menuOnGYKF.jpg);}





      .lx{background-image:url(Image/menuZLXZ.jpg);}



      .lx1{background-image:url(Image/menuOnZLXZ.jpg);}

  



   </style>



  

</head>



<body>



    <form id="form1" runat="server">



    <div>     



       <ul>



            <li style="width:113px; height:30px;

background-image:url(Image/menuGSGK.jpg); list-style-type:none; "

onmouseup="this.className='zj'" onmouseout="this.className='zj1'"> 



            </li>



        </ul>



    </div>



    </form>



</body>



</html>

高手看看那儿错了，实现不了，鼠标经过时没有反应

------解决方案--------------------
onmouseover
------解决方案--------------------

引用:

onmouseover

+++
------解决方案--------------------
写一个方法，然后在onmouseover里面调用~~
------解决方案--------------------
把这个去掉 background-image: url(Image/menuGSGK.jpg);

也换成用 class表示的。原因是 background-image: url(Image/menuGSGK.jpg); 是行内样式，级别最高，回覆盖其他设定

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

鼠标透过图片时变成另外一张

相关资料更多>

推荐阅读更多>