悬停改变背景图像而不是背景颜色

有人可以请指导我这段代码。目前，当我将鼠标悬停在一个链接上时，它会更改另一个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

悬停改变背景图像而不是背景颜色

回答

相关问题