javascript - 将鼠标悬停在子分区上时更改主分区的背景

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”上时更改“container”的背景。每个 sub 在 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
 });
});