懸停改變背景圖像而不是背景顏色

有人可以請指導我這段代碼。目前，當我將鼠標懸停在一個鏈接上時，它會更改另一個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");，但沒有發生的時候我將鼠標放在鏈接。非常感謝你，

來源

2014-10-17 tony

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

。

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

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

來源

2014-10-17 12:10:56 ckuijjer

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

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

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

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

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

來源

2014-10-17 12:10:15

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

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

來源

2014-10-17 12:14:37

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

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

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

來源

2014-10-17 12:24:58 chazsolo

你甚至可以縮短你的代碼彼此的方式，使用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"); 
     } 
)}

來源

2014-10-17 12:41:41 tamal3053

懸停改變背景圖像而不是背景顏色

回答

相關問題