创建hover触发的过渡侧边栏遇问题：侧边栏完全无法展开

问题根源 #

• Bootstrap的col-3栅格类会强制元素采用flex布局并设置固定宽度比例，直接覆盖了你自定义的width样式，导致hover时的宽度变化无法生效。
• .parallax1类中的width:400px与.jumbotron的width样式优先级一致，直接覆盖了初始的100px宽度，抵消了hover效果。
• 不合理的负margin设置让侧边栏的实际显示区域和hover触发区域错位，进一步影响交互效果。

修复后的代码 #

CSS部分

/* 侧边栏基础样式 */
.jumbotron {
  padding: 55px;
  color: #FFFFFF;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: cover; /* 确保背景图铺满容器 */
  width: 100px;
  height: 1400px;
  transition: width 1s ease-out; /* 合并过渡属性 */
  flex-shrink: 0; /* 防止flex布局下被压缩 */
}

/* hover展开效果 */
.jumbotron:hover {
  width: 300px;
}

/* 视差背景样式 */
.parallax1 {
  background-image: url("https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg");
  background-attachment: fixed;
}

/* 自定义布局容器 */
.sidebar-container {
  display: flex;
  gap: 20px; /* 侧边栏和内容区的间距 */
}

.content-area {
  flex: 1; /* 让内容区占据剩余空间 */
  margin-top: 20px;
}

HTML部分

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
    <div class="sidebar-container">
        <div class="jumbotron parallax1">
        </div>
        <div class="content-area">
            <h1><b></b>The Magical Codex</h1>
            <h2><em>of the Mega Gay Zone</em></h2>
            <h4>By Josh Azoneb</h4>
            <p>blah blah blah</p>
        </div>
    </div>
</div>

关键修改说明 #

1. 移除栅格类：删掉col-3，避免Bootstrap的宽度限制，改用自定义flex布局控制侧边栏和内容区的排列。
2. 合并样式优先级：把.parallax1的width设置移除，统一在.jumbotron中控制宽度，避免样式冲突。
3. 优化布局：用flex-shrink:0防止侧边栏被压缩，添加gap和flex:1确保内容区自适应剩余空间，同时修正背景图显示效果。
4. 修正交互区域：移除不合理的负margin，确保hover触发区域与侧边栏显示区域一致。

内容的提问来源于stack exchange，提问作者Bastronom