使用 jQuery 在悬停时扩展 div 相对于父 div答案

【问题标题】：Expanding div on hover relative to a parent div with jQuery使用 jQuery 在悬停时扩展 div 相对于父 div
【发布时间】：2022-02-03 07:55:36
【问题描述】：

我有一个父 div 和几个孩子：

<div id="main">
   <div id="child1">
      <div id="child2">
         <div id="child3">content</div>
      </div>
   </div>
</div>

CSS 是：

#main {width: 700px;}
#child1 {width: 150px;}
#child2 {width: 100%;}
#child3 {width: 100%;}

在悬停时，我希望 #child3 扩展到 #main 的 90% 宽度，而不是限制在其父级的 150 像素。

我尝试给 #child3 一个固定的像素宽度，但这会导致很多问题导致内容溢出到 #main div 之外。我想始终将 #child3 的扩展内容保留在 #main 中。

这可以用 JavaScript 或 jQuery 完成吗？请指教。谢谢！

JSFiddle 在这里。

【问题讨论】：

欢迎来到 Stack Overflow。你试过什么？你的代码有什么错误？请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example
我会放一个JSFiddle，我明白了。关于您的问题，我尝试的只是给它一个像素宽度，就像我在帖子中所说的那样。没有其他的。我只阅读了关于使用 jQuery 动态附加 CSS 的可能性。
是的，这可以通过.css() 选项来完成。但我也不知道你如何设置你的.hover() 或者当用户离开元素时会发生什么。
我添加了 JSFiddle。当用户离开时，#child3 应该回到原来的位置。请看 JSFiddle，谢谢！
请edit your question 包含所有相关信息和代码。非现场服务的链接可以作为补充信息，但理解您的问题所需的一切都应该在这里。见How to create a Minimal, Reproducible Example

标签： javascript jquery css

【解决方案1】：

考虑以下内容。

$(function() {
  $("#child3").hover(function() {
    // In
    $(this).css("width", $("#main").width() * 0.9);
  }, function() {
    // Out
    $(this).css("width", "");
  });
});

#main {
  width: 700px;
  box-shadow: inset 0 0 0 1px #000;
  padding: 10px;
}

#child1 {
  width: 150px;
}

#child2 {
  width: 100%;
}

#child3 {
  width: 100%;
  box-shadow: inset 0 0 0 1px #c00;
  padding: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="child1">
    <div id="child2">
      <div id="child3">content</div>
    </div>
  </div>
</div>

使用.hover()、.css()、.width()，您可以计算出另一个元素宽度的 90% 的新宽度。您可以分配它，然后重新分配它。

查看更多：

【讨论】：