如何为ACTIONS按钮添加非高亮底部内边距并设置常驻显示

我要修改代码实现两个目标：

• 为ACTIONS按钮添加底部内边距，且该区域鼠标悬停时不会被高亮；之前用action-blank类加空白行，但空白行会被高亮。
• 所有区块的ACTIONS按钮无需点击选中，常驻显示。

原始代码 #

CSS #

.vertical-menu {
  width: 100%;
  height: 150px;
  position: relative;
}

.trend-button:hover {
  background: linear-gradient(to right, transparent 2.5%, #f0f0f0 2.5%, #f0f0f0 97.5%, transparent 97.5%);
  align-items: center;
}

/* Exclude blank line and blank element from hover effect */

.button-label-line>div:hover,
.actions-container>.action-blank {
  background: none;
}

/* Style for the blank element */

.action-blank {
  height: 0.5em;
  /* Adjust height as needed */
}

.button-label-divider {
  height: 5px;
}

.actions-container>.action-blank {
  background: none;
}

/* Style for the blank element */

.action-blank {
  height: 0.5em;
  /* Adjust height as needed */
}

.vertical-menu input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.vertical-menu label {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  height: 100%;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}

.vertical-menu label:hover {
  background-color: #ccc;
}

.vertical-menu input[type="radio"]:checked+label {
  background-color: #04AA6D;
  color: white;
}

.vertical-menu .trend-button {
  display: none;
  background-color: #04AA6D;
}

.vertical-menu input[type="radio"]:checked+label+.trend-button {
  display: block;
  text-align: center;
  margin-top: -1px;
  /* Adjust the margin to remove white space */
}

.vertical-menu input[type="radio"]:checked+label+.trend-button button {
  width: 100%;
  background-color: #04AA6D;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

HTML #

<div class="vertical-menu" id="menu">
  <input type="radio" id="option1" name="menu-option" checked>
  <label for="option1">#H1#<div class="subtitle">#S1#</div></label>
  <div class="trend-button">
    #ACTIONS#
  </div>

  <input type="radio" id="option2" name="menu-option">
  <label for="option2">#H2#<div class="subtitle">#S2#</div></label>
  <div class="trend-button">
    #ACTIONS#
  </div>

  <input type="radio" id="option3" name="menu-option">
  <label for="option3">#H3#<div class="subtitle">#S3#</div></label>
  <div class="trend-button">
    #ACTIONS#
  </div>

  <input type="radio" id="option4" name="menu-option">
  <label for="option4">#H4#<div class="subtitle">#S4#</div></label>
  <div class="trend-button">
    #ACTIONS#
  </div>
</div>

修改后的代码 #

CSS #

.vertical-menu {
  width: 100%;
  position: relative;
}

/* 按钮容器常驻显示，添加底部内边距 */
.trend-button {
  display: block;
  background-color: #04AA6D;
  padding-bottom: 12px;
  text-align: center;
}

/* 仅按钮本身触发悬停高亮 */
.trend-button button:hover {
  background: linear-gradient(to right, transparent 2.5%, #f0f0f0 2.5%, #f0f0f0 97.5%, transparent 97.5%);
}

.vertical-menu input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.vertical-menu label {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}

.vertical-menu label:hover {
  background-color: #ccc;
}

.vertical-menu input[type="radio"]:checked+label {
  background-color: #04AA6D;
  color: white;
}

.vertical-menu .trend-button button {
  width: 100%;
  background-color: #04AA6D;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

HTML #

<div class="vertical-menu" id="menu">
  <input type="radio" id="option1" name="menu-option" checked>
  <label for="option1">#H1#<div class="subtitle">#S1#</div></label>
  <div class="trend-button">
    <button>#ACTIONS#</button>
  </div>

  <input type="radio" id="option2" name="menu-option">
  <label for="option2">#H2#<div class="subtitle">#S2#</div></label>
  <div class="trend-button">
    <button>#ACTIONS#</button>
  </div>

  <input type="radio" id="option3" name="menu-option">
  <label for="option3">#H3#<div class="subtitle">#S3#</div></label>
  <div class="trend-button">
    <button>#ACTIONS#</button>
  </div>

  <input type="radio" id="option4" name="menu-option">
  <label for="option4">#H4#<div class="subtitle">#S4#</div></label>
  <div class="trend-button">
    <button>#ACTIONS#</button>
  </div>
</div>

修改说明 #

1. 实现按钮常驻显示：

   • 移除.vertical-menu .trend-button的display: none，设置为display: block，删除仅选中时显示的关联规则，让所有按钮默认显示。

2. 添加底部内边距且避免悬停高亮：

   • 给.trend-button直接添加padding-bottom，替代之前的空白行方案，内边距区域属于容器但不会触发高亮。
   • 将悬停渐变效果从容器移到<button>元素上，只有按钮本身悬停时才显示高亮，容器内边距区域不受影响。
   • 移除原始代码中无用的action-blank相关样式，简化代码结构。
   • HTML中给#ACTIONS#包裹<button>标签，方便单独控制按钮样式。

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