链接:hover伪类失效问题：主链接正常侧边链接无效果

问题 #

主链接（id为big-box-content-topmain-mainew-link）的:hover下划线效果正常，但侧边链接（类为big-box-content-topmain-otherlist-link）的:hover效果完全不生效，需要实现鼠标悬停时链接内所有文本显示下划线。

原因 #

1. <a>标签默认是行内元素，无法正确包裹<div>、<h4>等块级元素，浏览器会自动拆分标签结构，导致hover事件无法覆盖整个链接区域。
2. 侧边链接的<a>未设置块级显示，hover触发范围仅局限于文本区域而非整个链接块；同时内部标题元素（如<h4>）的默认样式可能覆盖了链接的下划线。

修复步骤 #

1. 给侧边链接类添加display: block，将<a>转为块级元素，确保其能完整包裹内部块级元素，hover范围覆盖整个链接区域。
2. 明确设置hover时链接及所有子元素的下划线样式，避免子元素样式覆盖。

修改后的核心CSS代码 #

.big-box-content-topmain-otherlist-link {
  color: #102447;
  display: block; /* 转为块级元素，包裹内部所有内容 */
  text-decoration: none; /* 初始状态移除下划线，和主链接保持一致 */
}

.big-box-content-topmain-otherlist-link:visited {
  color: #102447;
}

.big-box-content-topmain-otherlist-link:hover,
.big-box-content-topmain-otherlist-link:hover * { /* 链接hover时，所有子元素同步显示下划线 */
  text-decoration: underline;
}

完整修改后的CSS代码 #

#big-box-content-topmain {
  width: 100%;
  height: 500px;
  box-sizing: border-box;
}

#big-box-content-topmain-mainew {
  height: 100%;
  width: 520px;
  box-sizing: border-box;
  padding-right: 20px;
  border-right: 1px lightgray solid;
  float: left;
}

#big-box-content-topmain-mainew-link {
  color: #102447;
  text-decoration: none
}

#big-box-content-topmain-mainew-link:hover {
  text-decoration: underline;
}

#big-box-content-topmain-mainew-link:visited {
  color: #102447;
}

#big-box-content-topmain-mainew-imgbox {
  height: 300px;
  width: 500px;
  box-sizing: border-box;
  border: lightgray 1px solid;
}

#big-box-content-topmain-mainew-imgbox-img {
  height: 100%;
  width: 100%;
}

#big-box-content-topmain-mainew-infoimgbox {
  width: 100%;
  height: 20px;
  box-sizing: border-box;
  padding: 0px 10px;
  background: rgb(239, 243, 255);
  background: linear-gradient(180deg, rgba(239, 243, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

#big-box-content-topmain-mainew-infoimgbox-autorpart {
  height: 100%;
  width: 50%;
  box-sizing: border-box;
  color: lightgray;
  float: left;
}

#big-box-content-topmain-mainew-infoimgbox-autorpart-icon {
  height: 100%;
  width: 20px;
  box-sizing: border-box;
  float: left;
  padding: 2px;
}

#big-box-content-topmain-mainew-infoimgbox-autorpart-autorname {
  height: 100%;
  width: auto;
  box-sizing: border-box;
  float: left;
  padding: 2px 5px;
  color: gray;
  font-size: 12px;
}

#big-box-content-topmain-mainew-infoimgbox-timepart {
  height: 100%;
  width: 50%;
  box-sizing: border-box;
  color: lightgray;
  float: left;
}

#big-box-content-topmain-mainew-infoimgbox-timepart-time {
  height: 100%;
  width: auto;
  box-sizing: border-box;
  float: right;
  padding: 2px 5px;
  color: gray;
  font-size: 12px;
}

#big-box-content-topmain-mainew-headerbox {
  width: 100%;
  height: auto;
  min-height: 29px;
  max-height: 58px;
  box-sizing: border-box;
  padding: 0px 10px;
  overflow: hidden;
}

#big-box-content-topmain-mainew-headerbox-header {}

.big-box-content-topmain-mainew-headerbox-header {
  margin: 0;
  line-height: 1.2;
  font-size: 24px;
}

#big-box-content-topmain-mainew-textbox {
  width: 100%;
  height: auto;
  max-height: 122px;
  box-sizing: border-box;
  padding: 15px 10px;
  overflow: hidden;
}

#big-box-content-topmain-mainew-textbox-text {}

.big-box-content-topmain-mainew-textbox-text {
  margin: 0;
  line-height: 1.5;
  font-size: 13px;
}

#big-box-content-topmain-otherlist {
  height: 100%;
  width: 440px;
  box-sizing: border-box;
  padding-left: 20px;
  float: left;
}

.big-box-content-topmain-otherlist-link {
  color: #102447;
  display: block;
  text-decoration: none;
}

.big-box-content-topmain-otherlist-link:visited {
  color: #102447;
}

.big-box-content-topmain-otherlist-link:hover,
.big-box-content-topmain-otherlist-link:hover * {
  text-decoration: underline;
}

.big-box-content-topmain-otherlist-zprava {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  padding: 10px 0px;
}

.big-box-content-topmain-otherlist-zprava-imgbox {
  height: 100%;
  width: 133px;
  float: left;
}

.big-box-content-topmain-otherlist-zprava-imgbox-img {
  height: 100%;
  width: 100%;
}

.big-box-content-topmain-otherlist-zprava-textbox {
  height: 100%;
  width: calc(100% - 133px);
  float: left;
  padding: 0px 10px;
  box-sizing: border-box;
}

.big-box-content-topmain-otherlist-zprava-textbox-text {
  line-height: 1.2;
  margin: 0;
  font-size: 16px;
}

HTML部分无需修改，保持原结构即可。

内容的提问来源于stack exchange，提问作者Začátečník Standa