我做了一个简单的方法来显示仅使用CSS看起来像弹出窗口的帮助文本.它工作正常,但默认情况下弹出窗口是左对齐的.我希望窗口更接近图标本身,就像(在我的例子中)"left:360px;" 会表现出来.由于悬停图标的位置可能会发生变化,是否有人知道根据悬停在图标上的位置设置弹出窗口位置的方法？我们使用jQuery和Prototype但我更喜欢只使用CSS,因此可以在任何类型的页面上使用相同的代码.谢谢.
这是我的例子:
编辑:这已经得到了解答,但这里是固定代码,以防其他人在悬停在图标上时寻找显示弹出消息的简单方法.此外,这是jsfiddle.net上的一个示例,因此您可以轻松地尝试:http://jsfiddle.net/zDADW/
顺便说一句,如果有人知道为什么有人会对此进行排名(截至本文撰写时有人点击了此问题的向下箭头),请告诉我.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: …