如何使 FF 中的 CSS 工具提示不推送元素轮廓
我按照此处发布的示例来制作自定义CSS工具提示。
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 99;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
我想知道是否有办法不让工具提示在 FireFox 中推出它的父元素 outline ，它似乎在 Chrome 中工作正常
div {
display: inline-block;
padding: 20px;
border: 2px solid #000;
outline: 2px solid #F00;
}
I'm following the example posted here for making custom css tooltips.
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 99;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
I am wondering if there is a way to not have the tooltip push out it's parent elements outline in FireFox, it seems to work fine in Chrome
div {
display: inline-block;
padding: 20px;
border: 2px solid #000;
outline: 2px solid #F00;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不明白你如何解决这个问题。我想知道这是不是火狐浏览器的一个bug？
唯一想到的是使用
box-shadow而不是outline：http://jsfiddle.net/thirtydot/HgeVh/9/
这有一个缺点，那就是你会在 IE8 中丢失轮廓（如果这很重要的话）。
I don't see how you can possibly fix this. I wonder if this is a Firefox bug?
The only thing that comes to mind is to use
box-shadowinstead ofoutline:http://jsfiddle.net/thirtydot/HgeVh/9/
This has the downside that you're losing the outline in IE8, if that matters.