鼠标移动到图片上，图片中心位置提示我要咨询，鼠标移出图片提示消失。
用于实现鼠标移动到图片上显示提示信息的效果，并且还添加了一个超级按钮，点击按钮后可以跳转到新页面。
演示截图：
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-container:hover .tooltip {
opacity: 1;
}
.tooltip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 0, 0.75);
color: black;
padding: 10px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease;
}
.button {
background-color: rgba(255, 255, 0, 0.75);
color: black;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="image-container">
<img src="your_image.jpg" alt="Your Image">
<div class="tooltip">
<button class="button" onclick="window.location.href='new_page.html'" rel="nofollow">我要咨询</button>
</div>
</div>
</body>
</html>将 "your_image.jpg" 替换为自己的图片路径，将 "new_page.html" 替换为要跳转的页面路径。
这段代码使用CSS的:hover伪类来实现鼠标悬停时显示提示信息的效果，使用了CSS的transition属性来实现渐变的动画效果。按钮使用了JavaScript来实现点击后跳转到新页面的功能，rel="nofollow"屏蔽爬虫抓取。
