2014-10-17 216 views
1

有人可以請指導我這段代碼。目前,當我將鼠標懸停在一個鏈接上時,它會更改另一個div上的背景顏色。我不想更改背景顏色,而想更換爲其他背景圖片。懸停改變背景圖像而不是背景顏色

<html> 
    <head> 
     <title>Sample</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <style> 
     body { 
      background: #ccc; 
      transition:0.5s; 
     } 
    </style> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#div-1").hover(
        function() { 
         $('#top_section').css("background", "#ff9900"); 
        }, 
        function() { 
         $('#top_section').css("background", "#ccc"); 
        } 
       ); 

       $("#div-2").hover(
        function() { 
         $('#top_section').css("background", "red"); 
        }, 
        function() { 
         $('#top_section').css("background", "#ccc"); 
        } 
       ); 

       $("#div-3").hover(
        function() { 
         $('#top_section').css("background", "yellow"); 
        }, 
        function() { 
         $('#top_section').css("background", "#ccc"); 
        } 
       ); 
      }); 
     </script> 
    </head> 
<body> 

    <a id="div-1" href="#"> Orange</a> 
    <a id="div-2" href="#">Red</a> 
    <a id="div-3" href="#">Yellow</a> 
    <div id="top_section" style="height:100px;width:100px;"></div> 
</body> 
</html> 

我轉產$('#top_section').css("background", "#ff9900");$('#top_section').css("background-image", "/images/image1.jpg");,但沒有發生的時候我將鼠標放在鏈接。 非常感謝你,

+0

你必須糾正:.css(「background-image」,「/images/image1.jpg」);'到'.css(「background-image」,「url('/ images/image1 .jpg')「);' – emmanuel 2014-10-17 12:09:49

回答

1

嘗試改變$('#top_section').css("background-image", "/images/image1.jpg");$('#top_section').css("background-image", "url('/images/image1.jpg')");

還是看http://codepen.io/ckuijjer/pen/giABb爲例

+0

謝謝。有用。當背景圖像變化時,是否可以添加一點淡入淡出? – tony 2014-10-17 13:31:18

+0

我認爲你不能淡入/淡出使用'background-image' css屬性設置的圖像。如果您使用常規的'',您可以通過設置'opacity' css屬性或使用jQuery的'fadeIn'和'fadeOut'來動畫。由於加載圖像可能需要一些時間,這可能會在視覺上干擾褪色,您可能需要預加載它們。 – ckuijjer 2014-10-17 14:28:40

+0

感謝您的信息,也可能不希望對我使用的圖像類型產生影響......在圖像背景中,他們是(圖形設計師)使用漸變背景,所以當它褪色 - 它像素化,看起來很糟糕......再次感謝 – tony 2014-10-17 14:44:35

1

由於/images/image1.jpg是你應該做以下德的網址:您需要圍繞你的圖片網址與url('...')

$('#top_section').css("background-image", "url(/images/image1.jpg)") 
0

我假設的路徑是不正確的。你可以試試這個代碼:

$('#top_section').css("background-image", "url(../images/image1.jpg)") 
0

或者擺脫混亂的,並使用CSS的一般兄弟選擇...

#div-1:hover ~ #top_section { 
    background-image: url(/images/image1.jpg); 
} 

#div-2:hover ~ #top_section { 
    background-image: url(/images/image2.jpg); 
} 
... 
0

你甚至可以縮短你的代碼彼此的方式,使用data-屬性

<a id="div-1" href="#" data-image="/images/image1.jpg"> Orange</a> 
<a id="div-2" href="#" data-image="/images/image2.jpg">Red</a> 
<a id="div-3" href="#" data-image="/images/image3.jpg">Yellow</a> 
<div id="top_section" style="height:100px;width:100px;"></div> 

$(document).ready(function() { 
     $("div").hover(function() { 
      var img = $(this).attr('data-image'); // take the attribute value. 
      $('#top_section').css("background", "url(img)"); 
     }, 
     function() { 
      $('#top_section').css("background", "#ccc"); 
     } 
)}