纯CSS跟随文本流动的pop提示框示例，不用hack，惟在opera下仍然无法正常显示
虽然知道内联元素嵌套块级元素是不对的，但是实际应用中确会碰到许多类似的情况，通过阅读怿飞版主的a:hover bug解决方法，终于能稍微解决了，现在的问题就是在opera下面指定top、left、right、bottom元素会出现支离破碎的现象，遂只能设置为auto以委曲求全……
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
<style type="text/css" media="screen">
body {
font-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
font-size:14px;
line-height:1em;
background:url(http://www.moonless.net/i/sample.gif) no-repeat -33px -123px;
text-decoration:none;
position:relative;
}
.abtn_3 span {
visibility:hidden;
overflow:hidden;
}
.abtn_3:hover {
text-indent:0;
}
/* 提示框 */
.hintsB {
display:none;
}
.abtn_3:hover .hintsB {
display:block;
position:absolute;
top:-1.3em;
left:20px;
width:280px;
padding:0 0 0 5px;
background:url(http://www.moonless.net/i/sample.gif) no-repeat 0 center;
color:#326324;
cursor:text;
font-weight:normal;
}
@media all and (min-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
line-height:18px;
padding:7px 4px 6px 6px;
border:1px solid #bed48f;
border-left:none;
background-color:#effaeb;
font-size:12px!important;
}
</style>
</head>
<body>
bla... bla...
<div>
您选择的方式是bla... bla... bla...：<a href="javascript:void(0);" class="abtn_3"><span>提示</span><div class="hintsB"><div>请选择适合您的方式，请选择适，请选择适，请选择适，请选择适合您的。</div></div></a>您选择的方式是bla... bla... bla...您选择的方式是bla... bla... bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择
您选择的方式是bla... bla... bla...：<a href="javascript:void(0);" class="abtn_3"><span>提示</span><div class="hintsB"><div>请选择适合您的方式，请选择适，请选择适，请选择适，请选择适合您的。</div></div></a>ffdfde
</div>
</body>
</html>
将<a>指定为inline-block的方法不可靠，在更好的方法出现之前，我仍然会继续修改这个示例，希望能得到实用的收效。
PS: 写css的时候耳边响着《旅之沼》、《燐光》，这两曲还真是煽情，此时心情无比惆怅……
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sample</title>
<style type="text/css" media="screen">
body {
font-size:12px;
}
/* 链接按钮 3 */
.abtn_3 {
font-size:14px;
line-height:1em;
background:url(http://www.moonless.net/i/sample.gif) no-repeat -33px -123px;
text-decoration:none;
position:relative;
}
.abtn_3 span {
visibility:hidden;
overflow:hidden;
}
.abtn_3:hover {
text-indent:0;
}
/* 提示框 */
.hintsB {
display:none;
}
.abtn_3:hover .hintsB {
display:block;
position:absolute;
top:-1.3em;
left:20px;
width:280px;
padding:0 0 0 5px;
background:url(http://www.moonless.net/i/sample.gif) no-repeat 0 center;
color:#326324;
cursor:text;
font-weight:normal;
}
@media all and (min-width: 0px){ .abtn_3:hover .hintsB {top:auto;left:auto;} }
.abtn_3:hover .hintsB div {
line-height:18px;
padding:7px 4px 6px 6px;
border:1px solid #bed48f;
border-left:none;
background-color:#effaeb;
font-size:12px!important;
}
</style>
</head>
<body>
bla... bla...
<div>
您选择的方式是bla... bla... bla...：<a href="javascript:void(0);" class="abtn_3"><span>提示</span><div class="hintsB"><div>请选择适合您的方式，请选择适，请选择适，请选择适，请选择适合您的。</div></div></a>您选择的方式是bla... bla... bla...您选择的方式是bla... bla... bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择bla...您选择的方式是bla... bla... bla...择
您选择的方式是bla... bla... bla...：<a href="javascript:void(0);" class="abtn_3"><span>提示</span><div class="hintsB"><div>请选择适合您的方式，请选择适，请选择适，请选择适，请选择适合您的。</div></div></a>ffdfde
</div>
</body>
</html>
将<a>指定为inline-block的方法不可靠，在更好的方法出现之前，我仍然会继续修改这个示例，希望能得到实用的收效。
PS: 写css的时候耳边响着《旅之沼》、《燐光》，这两曲还真是煽情，此时心情无比惆怅……
标签： Web技术及应用
发布时间：下午6:18
0 条评论:
发表评论
指向此帖子的链接:
创建链接
<< 主页