Question

我正在尝试创建一种效果，鼠标悬停时图像会发生变化，但也会在另一个位置显示文字。基本上我有4个图标链接，每个链接都有自己的文本标题。当鼠标悬停在顶部时，我希望文本显示在页面的右侧。我可以改变图像但是当浏览器改变大小时文本会不断改变位置。有没有办法让文本始终保持在同一位置？

以下是我正在尝试做的一个示例：http://www.getthefive.com/

到目前为止，这是我的代码：

CSS：

#monkey {
background-image: url('link');
background-repeat:no-repeat;
height: 60px;
width: 50px;
}

#monkey:hover {
background-image: url('link');
background-repeat:no-repeat;
}

#monkey .text {
position:fixed;
top:50px;
left:1100px;
visibility:hidden;
}

#monkey:hover .text {
visibility:visible;
}

HTML：

<div id="monkey">
<p class="text">monkey</p>
</div>

感谢你!!

Answer 1

您的唯一问题似乎是在调整浏览器大小时文本位置无法调整。尝试使用position:relative代替position:fixed

双悬停效果 - 在静态位置更改图像和显示文本

1 个答案: