HTML按钮CSS样式失效与hover变暗、页面跳转功能实现咨询

嘿，别慌！我来帮你把按钮的问题捋清楚～

首先，你遇到的按钮不遵循CSS样式、没法实现悬停变暗+跳转的问题，大概率是几个小细节没处理好，我给你补全代码并拆解原因：

一、完整的HTML+CSS示例代码 #

先给你一套能直接用的代码，完美对应你要的两个功能：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { 
      background-image: url("res/images/space2.jpg"); 
    } 
    div.wrapper { 
      width: 720px; 
      height: 576px; 
      margin-left: auto; 
      margin-right: auto; 
    } 
    div.banner { 
      width: 750px; 
      height: 160px; 
      position: relative; 
      top: 0px; 
      margin-left: auto; 
      margin-right: auto; 
    } 
    div.topnav { 
      border-radius: 25px; 
      background: #2c3e50; /* 补全导航栏背景色，你可以换成自己喜欢的色调 */
      padding: 12px; /* 加内边距避免按钮挤在边缘 */
      text-align: center; /* 按钮居中，可选 */
    }

    /* 按钮基础样式 */
    .nav-btn {
      display: inline-block; /* 关键！让a标签能像按钮一样设置内边距、背景色 */
      padding: 10px 20px;
      margin: 0 8px;
      border-radius: 6px;
      background-color: #ecf0f1; /* 按钮初始亮色 */
      color: #2c3e50;
      text-decoration: none; /* 去掉a标签默认的下划线 */
      font-weight: 500;
      transition: background-color 0.3s ease; /* 悬停时的平滑过渡动画 */
    }

    /* 鼠标悬停变暗效果 */
    .nav-btn:hover {
      background-color: #bdc3c7; /* 比初始色深的灰色，实现变暗效果 */
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="banner">
      <!-- 这里放你的banner内容 -->
    </div>
    <div class="topnav">
      <!-- 跳转按钮：直接用a标签，href写同目录下的HTML文件名即可 -->
      <a href="page1.html" class="nav-btn">前往页面1</a>
      <a href="page2.html" class="nav-btn">前往页面2</a>
    </div>
  </div>
</body>
</html>

二、你原来可能踩的坑 #

1. CSS样式不完整：你原来的代码里div.topnav { background: ...没写完，这会导致浏览器解析CSS时出错，可能影响后续按钮样式生效。
2. 按钮标签选择不对：如果用<button>标签做跳转，需要额外写JavaScript；而用<a>标签是最省心的，天然支持href跳转，还能轻松加CSS样式。
3. 行内元素样式限制：<a>标签默认是行内元素，没法直接设置内边距、背景色这些样式，必须加display: inline-block或者block才能让样式生效。
4. 伪类使用不当：悬停效果要靠:hover伪类实现，必须对应正确的选择器（比如.nav-btn:hover），不然浏览器不知道什么时候触发样式变化。

三、关键功能说明 #

• 跳转功能：只要给<a>标签的href属性写同目录下的HTML文件名（比如page1.html），点击按钮就会直接跳转，不用额外代码。
• 悬停变暗：通过.nav-btn:hover设置比初始颜色深的背景色，再加上transition属性，让颜色变化更顺滑，不会太突兀。

照着这个代码改，你的按钮应该就能正常工作啦～

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