Question

我有1个容器，有3个子项和Jquery：

$(function() {
  $('.sub1').hover(function() {
    $('#container').css('background-image', 'url("../img/plan.jpg")');
  }, function() {
    // on mouseout, reset the background colour
    $('#container').css('background-color', '');
  });
});

<div id="container">
  <div class="sub1">This is link 1</div>
  <div class="sub2">This is link 2</div>
  <div class="sub3">This is link 3</div>
</div>

目标是当鼠标悬停在“sub1”，“sub2”或“sub3”上时更改“容器”的背景。每个子在css中都有自己的背景图像。一旦鼠标不再悬停“sub1”，“sub2”或“sub3”，背景将返回白色。

不要介意没有sub2或sub3功能，我稍后会关注它们。

我让它工作到mouseout的一部分。容器背景不会返回原始状态（白色）。

是否有一些古茹可以帮助我？

提前致谢，

鲁洛夫！

Answer 1

我认为代码中唯一的错误就是您重置了background-color而不是background-image属性

$(function() {
 $('.sub1').hover(function() { 
   $('#container').css('background-image', 'url("../img/plan.jpg")');
 }, function() {
   // on mouseout, reset the background colour
   $('#container').css('background-image', ''); // definately here is the error
 });
});

Answer 2

您正在重置背景色而不是背景图像。我冒昧地让它适用于所有潜艇。：）

＆＃13;

$(function() {
  $('#container').on('mouseover', '[class^="sub"]', function() {
    var container = $('#container');
    switch ($(this).attr('class')) {
      case 'sub1':
        container.css('background-image', 'url("http://placehold.it/500x50")');
        break;
      case 'sub2':
        container.css('background-image', 'url("http://placehold.it/500x60")');
        break;
      case 'sub3':
        container.css('background-image', 'url("http://placehold.it/500x70")');
        break;
      default:
    }
  });
  
  $('#container').on('mouseout', '[class^="sub"]', function() {
    $('#container').css('background-image', '');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="container">
  <div class="sub1">This is link 1</div>
  <div class="sub2">This is link 2</div>
  <div class="sub3">This is link 3</div>
</div>

＆＃13;

Answer 3

看起来如果将鼠标悬停在每个.sub上，你会变成红色，否则你会变绿然后你就可以把图像放进去了

<强>编辑：在悬停时为您添加图像，您可以在鼠标移动中获取图像，然后移除图像并设置颜色

   $(function() {
      $('#container > div').hover(function() {
        $('#container').css('background-image',                   'url(http://www.placecage.com/200/300)');
        console.log("mouse over");
      }, function() {
        // on mouseover, reset the background colour
        $('#container').css({
           'background-color': 'green',
           'background-image': 'none'
        });
        console.log("mouse out");
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="container">
      <div class="sub1">This is link 1</div>
      <div class="sub2">This is link 2</div>
      <div class="sub3">This is link 3</div>
    </div>

将鼠标悬停在子区

3 个答案: