鼠标经过头像时会变大-Go服务器开发

如果您想要在鼠标经过头像时使其变大，可以通过CSS的transform属性和transition属性实现动画效果。以下是修改后的代码：

<!DOCTYPE html>
<html>
<head>
    <title>px的网页</title>
    <style>
        body {
            background: linear-gradient(to bottom, skyblue, white);
            margin: 0;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        
        h1 {
            margin-bottom: 20px;
        }
        
        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
        }
        
        img:hover {
          transform: scale(1.2); /* 鼠标悬停时放大图片 */
          cursor:pointer; /* 显示手型指针 */
        }
        
        select {
          margin-bottom: 10px;
        }
        
        .red-text {
          color:red;
          font-weight:bold; 
          /* 可以根据需要添加其他样式 */
        }
    </style>
</head>
<body>
    <div class="container">
      
      	<img src="your-avatar.jpg" alt="头像">
      
      	<h1>姓名：<span id="name">[你的姓名]</span></h1>

      	<p>Email：<span id="email">[你的邮箱]</span></p>

      	<p>爱好：
          	<select id="hobby" onchange="changeColor()">
                <option value="">选择爱好</option>
                <option value="篮球">篮球</option>
                <option value="足球">足球</option>
                <option value="游泳">游泳</option>
                <!-- 添加更多选项 -->
          	</select>
      	</p>

      	<p>专业：<span id="major">[你的专业]</span></p>

      	<p>学号：<span id="student-id">[你的学号]</span></p>
    </div>

    <script src="main.js"></script><!-- 将相关JavaScript代码放在名为main.js的文件中 -->
</body>
</html>

现在，当鼠标悬停在头像上时，它会变大。请确保头像图片存在并正确设置路径。

希望这次修改满足了您的要求！如有其他问题，请随时提问。

内容由零声教学AI助手提供，问题来源于学员提问