Question

有人可以指导我这段代码。目前，当我将鼠标悬停在链接上时，它会更改另一个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");但是当我将鼠标悬停在链接上时没有任何反应。非常感谢你，

Answer 1

由于/images/image1.jpg是一个URL，您应该执行以下操作：

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

Answer 2

您需要使用url('...')包围图片网址。

尝试将$('#top_section').css("background-image", "/images/image1.jpg");更改为$('#top_section').css("background-image", "url('/images/image1.jpg')");

或查看http://codepen.io/ckuijjer/pen/giABb示例

Answer 3

我认为路径不正确。您可以尝试以下代码：

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

Answer 4

或者摆脱那些混乱并使用CSS的一般兄弟选择器......

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

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

Answer 5

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

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

5 个答案: