将鼠标悬停在 subdiv 上时更改主 div 的背景答案

【问题标题】：Changing background of main div when hovering over subdiv将鼠标悬停在 subdiv 上时更改主 div 的背景
【发布时间】：2015-10-29 21:02:25
【问题描述】：

我有 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部分。容器背景不会恢复到原来的状态（白色）。

有没有高手可以帮帮我？

提前致谢，

罗洛夫！

【问题讨论】：

你不应该重置background-image属性而不是background-color吗？
看看这个样本jsbin.com/umalu4/edit?html,js,output
你想在这里达到什么效果，它应该是什么样子的？它代表什么，某种导航菜单？想知道这是否不能单独使用 CSS 来解决。
看看roelofplas.nl/#about，顺便说一下，我使用 id 之类的容器和类之类的 sub1 sub 2 sub 3 等，只是为了让你们更容易阅读。我的代码大部分时间都是一团糟哈哈。（顺便说一句，我正在编辑该网站以从中学习，但我没有成功。）

标签： javascript jquery html hover mouseout

【解决方案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
 });
});

【讨论】：

谢谢，我使用此回复并将其作为遮阳篷推销。非常感谢。我有时很愚蠢，哈哈。 :)

【解决方案2】：

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

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

【讨论】：

也不得不说声谢谢，因为你用潜艇完成的那件事让我很好奇。一旦我完成了这件事，我肯定会调查一下。 :D
不客气，祝你好运。简短说明：[class^="sub"] 以“sub”开头的所有类为目标，但在此设置中，仅当在 #container 内时。 $(this).attr('class') 获取 switch 语句的完整类名。其余的我想你明白了。 :)
在您编辑后，我改用此代码。这正是我所说的。查看roelofplas.nl/#about 以查看它是否正常工作。我在我的问题中使用了不同的 id 以使其更容易。但它就像我现在想要的那样工作。知道如何在鼠标触发鼠标/鼠标的地方使“盒子”更大吗？
是的，也许 CSS .howitworks li { display: block; } 可以解决问题？
是的，确实做到了。现在我正在尝试向背景 mousein mouseout 添加淡入淡出。知道我应该如何解决这个问题吗？

【解决方案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>

【讨论】：

你说得对，我有背景颜色而不是背景图像。我喜欢在编码方面成为菜鸟哈哈。 -.-
没问题兄弟 :) 我们每天都在学习，未来有一个很好的编码:)