将鼠标悬停在子 div 上时更改主 div 的背景

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" 上，背景将 return 变为白色。

不要介意目前还没有 sub2 或 sub3 功能，我稍后会重点介绍这些功能。

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

有没有高手可以帮助我？

提前致谢，

鲁洛夫！

Answer 1

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

$(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', '');
  });
});

<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>

Answer 2

它应该看起来像当鼠标悬停在每个 .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>

Answer 3

我认为您的代码中唯一的错误是您重置了 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
 });
});

将鼠标悬停在子 div 上时更改主 div 的背景

Changing background of main div when hovering over subdiv

html

javascript

jquery

hover

mouseout