修复Facebook按钮悬停动画及实现页面响应式适配

一、悬停显示文字的问题修复 #

原代码中span#icontitle被包裹在固定宽度60px的.icon容器内，导致文字被隐藏。同时按钮布局方式需要调整，让图标和文字横向排列：

修改点： #

• 调整HTML结构：将span从.icon中移出，与.icon同级放在.button内
• 调整CSS布局：将.button设为flex布局，实现图标与文字的横向对齐
• 优化过渡效果：确保文字在按钮hover时自然显示

二、移动端响应式适配 #

• 修复meta标签拼写错误（intitial-scale → initial-scale），这是移动端适配的核心基础
• 为图片、文本、按钮添加媒体查询，适配不同屏幕尺寸

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Correa Events</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap" rel="stylesheet">
</head>

<body>
  <img src="img/correaevent.png" alt="Correa Event Center" id="eventcenterimg">
  <div class="correa-events-info">
    <h4 id="starting-info">Book and experience any special events at Correa's Events Center.</h4>
    <h4 id="starting-info2">Call to book at:</h4>
    <h3 id="phonenumber1"><b>720-404-2284: Victor</b></h3>
    <h3 id="phonenumber2"><b>720-292-9963: Monica</b></h3>
    <h3 id="address">Address: 3890 Kipling St. Wheat Ridge, CO, 80033</h3>
  </div>
  <div class="wrapper">
    <div class="button">
      <div class="icon">
        <a href="https://www.facebook.com/people/Correas-Event-Center/100077040368594/" target="_blank"><i class="fab fa-facebook-f"></i></a>
      </div>
      <span id="icontitle">Facebook</span>
    </div>
  </div>
</body>

</html>

CSS代码 #

body {
  background: rgb(243, 234, 234);
  margin: 0;
  padding: 0;
}

#eventcenterimg {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  max-width: 100%;
  height: auto;
  background-repeat: no-repeat;
}

#starting-info {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  margin-top: 32vh;
}

#starting-info2 {
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
}

#phonenumber1, #phonenumber2 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: green;
}

#address {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
}

.wrapper {
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  margin-top: 2rem;
}

.wrapper .button {
  display: flex;
  align-items: center;
  height: 60px;
  width: 60px;
  margin: 0 5px;
  overflow: hidden;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-out;
}

.wrapper .button:hover {
  width: 200px;
}

.wrapper .button .icon {
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
}

.wrapper .button:hover .icon {
  background: #4267B2;
}

.wrapper .button .icon i {
  font-size: 25px;
  line-height: 60px;
  color: #fff;
  transition: all 0.3s ease-out;
}

.wrapper .button span {
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  color: #4267B2;
  white-space: nowrap;
}

/* 移动端响应式适配 */
@media (max-width: 768px) {
  #eventcenterimg {
    width: 80%;
  }
  
  #starting-info {
    margin-top: 15vh;
    font-size: 1.1rem;
    padding: 0 1rem;
  }
  
  #starting-info2, #phonenumber1, #phonenumber2, #address {
    font-size: 1rem;
    padding: 0 1rem;
  }
  
  .wrapper .button {
    height: 45px;
    width: 45px;
  }
  
  .wrapper .button:hover {
    width: 160px;
  }
  
  .wrapper .button .icon {
    height: 45px;
    width: 45px;
    line-height: 45px;
  }
  
  .wrapper .button .icon i {
    font-size: 20px;
    line-height: 45px;
  }
  
  .wrapper .button span {
    font-size: 16px;
    line-height: 45px;
  }
}

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