Jquery 悬停以更改背景图像而不是背景颜色_Jquery_Css

Jquery 悬停以更改背景图像而不是背景颜色

jquery css

Jquery 悬停以更改背景图像而不是背景颜色,jquery,css,Jquery,Css,有人能用这段代码指导我吗。当前，当我将鼠标移到链接上时，它会更改另一个div上的背景色。我不想更改背景色，而是希望更改为另一个背景图像 <html> <head> <title>Sample</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style> b

有人能用这段代码指导我吗。当前，当我将鼠标移到链接上时，它会更改另一个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>


样品
正文{
背景：#ccc；
过渡：0.5s；
}
$（文档）.ready（函数（）{
$（“#div-1”）。悬停(
函数（）{
$（'top#u section'）.css（“background”，'ff9900”）；
}, 
函数（）{
$（'top#u section'）.css（“background”、“#ccc”）；
}
);
$（“#div-2”）。悬停(
函数（）{
$（“#顶部部分”）.css（“背景”、“红色”）；
}, 
函数（）{
$（'top#u section'）.css（“background”、“#ccc”）；
}
);
$（“#div-3”）。悬停(
函数（）{
$（“#顶部部分”）.css（“背景”、“黄色”）；
}, 
函数（）{
$（'top#u section'）.css（“background”、“#ccc”）；
}
);
});

我正在更改行

$（'top#u section'）.css（“background”，“#ff9900”）

到

$（'#top_section'）.css（“background image”，“/images/image1.jpg”）但当我将鼠标悬停在链接上时，什么也没有发生。
非常感谢，
因为/images/image1.jpg是一个URL，您应该执行以下操作：
$('#top_section').css("background-image", "url(/images/image1.jpg)")

您需要用url（“…”）
包围图像url
尝试更改$（'#top_section'）.css（“background image”，“/images/image1.jpg”）
到$（'#top_section'）.css（“背景图像”，“url（'/images/image1.jpg'）”）
或者参见示例
我假设路径不正确。您可以尝试以下代码：
$('#top_section').css("background-image", "url(../images/image1.jpg)")

或者摆脱这种混乱，使用CSS的通用同级选择器
#div-1:hover ~ #top_section {
    background-image: url(/images/image1.jpg);
}

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

您甚至可以使用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");
      }
 )}


$（文档）.ready（函数（）{
$（“div”）.hover（函数（）{
var img=$（this）.attr（'data-image'）；//获取属性值。
$（'top#u section'）.css（“背景”、“url（img）”）；
}, 
函数（）{
$（'top#u section'）.css（“background”、“#ccc”）；
}
)}
您必须更正：.css（“背景图像”，“图像/图像1.jpg”）；
到.css（“背景图像”，“url（'/images/image1.jpg'））
谢谢。它可以工作。背景图像更改时，是否可以在其中添加一点淡入/淡出？我认为您不能淡入/淡出使用背景图像css属性设置的图像。如果您使用常规
可以通过设置不透明度css属性的动画或使用jQuery的淡入/淡出
和淡出
。由于加载图像可能需要一些时间，这可能会在视觉上干扰淡出，您可能需要预加载它们。感谢您提供的信息，我可能不希望对我使用的图像类型产生影响…在图像的背景中，它们是（图形设计师）使用渐变背景，所以当它褪色时，它会像素化，看起来很糟糕…再次感谢