如何用CSS实现链接仅hover时显示下划线及id与class使用疑问

链接hover才显示下划线的实现 #

你只需要在CSS文件中添加以下规则即可，完全不影响你现有absolute定位的布局逻辑：

/* 重置所有链接的默认样式，默认不显示下划线 */
a {
  text-decoration: none;
  color: inherit; /* 继承父元素文字颜色，避免默认链接蓝色破坏现有配色 */
}

/* 仅鼠标hover时显示下划线 */
a:hover {
  text-decoration: underline;
}

如果需要给不同区域的链接设置不同的hover样式，比如导航栏的链接hover要显示红色下划线，单独加更精确的选择器即可：

.navigation a:hover {
  text-decoration-color: #ff0000;
}

id与class属性的选择建议 #

• id：仅用于页面内唯一不可重复的元素，单个HTML页面中同一个id只能出现一次，适合你代码里的新闻区块#news这类全局唯一的模块，也可以用来给单个元素设置独有的样式（比如每个展品的定位坐标不同，可以用id单独设置left、top值）
• class：用于多个具有相同样式特征的元素，可以重复调用，比如你现有6个展品容器都设置了position:absolute，就可以统一给它们加同一个class，把通用属性写到class的CSS规则里，避免重复写代码，后续修改通用样式也只需要改一次。

你可以把6个展品的div都加上museum-item的class：

<div class="museum-item" id="museumimageone">...</div>
<div class="museum-item" id="museumimagetwo">...</div>
<!-- 剩下4个同理 -->

然后在CSS里统一设置通用样式，不需要每个id都重复写position属性：

.museum-item {
  position: absolute;
  /* 还可以统一设置展品容器的字体、内边距等通用属性 */
}

完整调整后的CSS代码（完全保留absolute定位，未使用grid布局，符合作业要求） #

body {
  margin: 0;
  padding: 0;
  font-family: Times, "Times New Roman", Georgia, serif;
  font-size: 14px;
  color: #333333;
  width: 1024px;
}

/* 新增链接样式 */
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: underline;
}

.navigation {
  background-color: #333333;
  color: #fefefe;
  width: 1024px;
  font-size: 120%;
  border-bottom: 3px solid #ff0000;
}

img {
  width: 200px;
  height: 100px;
}

/* 新增展品通用样式 */
.museum-item {
  position: absolute;
}

#museumimageone {
  left: 24px;
  top: 200px;
}

#museumimagetwo {
  left: 280px;
  top: 200px;
}

#museumimagethree {
  left: 536px;
  top: 200px;
}

#museumimagefour {
  left: 24px;
  top: 400px;
}

#museumimagefive {
  left: 280px;
  top: 400px;
}

#museumimagesix {
  left: 536px;
  top: 400px;
}

#news {
  position: absolute;
  left: 792px;
  top: 220px;
  text-align: left;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

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