我在尝试这样一个动作,鼠标划过DIV时,改变背景图片。
图片2的地址存放在一个DIV里,鼠标划过DIV后替换图片2的网址进入第一个DIV的背景地址。代码如下。    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
           $(document).ready(function() {
                $('#myhover').hover(function(){
var newsrc = $(this).find('#replace').html();
$(this).children('#logo').attr('background-image', 'url(' + newsrc + ')');
                        //劳驾再加一个  no-repeat 0 0; 0 0可以用background-position,那么no-repeat呢?
});
           });
    </script>
<div id="header">
  <a id="myhover"><div id="logo" style="background:url(image1.jpg) no-repeat 0 0;"></div></a>
  <div id="replace" style="display:none;">image2.jpg</div>
</div>
如果把图片2的网址直接放在jquery代码里替换,可以实现。但是如果要按我的要求,替换图片地址从一个display:none的DIV,到前一个DIV的背景地址,如何实现?谢谢。

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <title> new document </title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script type="text/javascript" src="js/jq.js"></script>
    <style type="text/css">
    #logo{width:760px;height:500px;}
    </style>
    </head> <body>
      <script type="text/javascript">
      $(document).ready(function() {
      $('#myhover').mouseover(function(){
    var newsrc = $(this).next('#replace').html();
    alert(newsrc);
    $(this).children('#logo').css('background', 'url(' + newsrc + ') no-repeat 0 0');
      //劳驾再加一个 no-repeat 0 0; 0 0可以用background-position,那么no-repeat呢?
    });
      });
      </script>
    <div id="header">
      <a id="myhover"><div id="logo" style="background:url(img/11.jpg) no-repeat 0 0;"></div></a>
      <div id="replace" style="display:none;">img/22.jpg</div>
    </div>
    </body>
    </html>