个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在一个相当简单的网页中，将鼠标悬停在某些链接上时会出现一些类似于工具提示的文本。
首先，这是我正在使用的测试页:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tooltip Test Page</title>
<style type="text/css">
html, body, form, table, tr, td, div, p, h1, h2, h3, h4, h5 {
border:0;
margin:0;
padding:0;
}
body {
margin:10px;
}
html, body, table {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
h1 {
font-weight:bold;
font-size:16px;
}
table {border-collapse:collapse;}
td {padding:0 8px 0 0;}
a.tooltip {
z-index:24;
text-decoration:none;
cursor:default;
position:relative;
color:#000;
display:block;
width:100px;
}
a.tooltip span {display:none;}
a.tooltip:hover, a.tooltip:active {
z-index:25;
color:;
background:;
/*
the color and background actually don't matter for their values,
it's just that these have to change for IE to apply this style properly.
Leaving out the color or the background makes this fail in different ways.
*/
}
a.tooltip:hover span, a.tooltip:active span {
display:block;
position:absolute;
color:black;
background-color:#FFFFCC;
border:1px solid black;
padding:1px;
text-align:left;
top:0;
left:0;
margin-top:-1px;
}
td span.s5 {color:#ff0000}
td span.s6 {color:#0000ff}
</style>
<script type="text/javascript">
function labelSubmit(label) {
document.getElementById('o').value=label;
document.BackAt.submit();
}
</script>
</head>
<body>
<h1>tooltip Test Page</h1>
<table>
<tbody>
<tr>
<td><span class="s6">■</span> Name 3</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some very long tooltip text to demonstrate the problem by overlapping the cells below.</span></a></td>
</tr>
<tr>
<td><span class="s6">■</span> Name 1</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
</tr>
<tr>
<td><span class="s6">■</span> Name 2</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some tooltip text</span></a></td>
</tr>
<tr>
<td><span class="s6">■</span> Name 4</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
</tr>
<tr>
<td><span class="s5">■</span> Name 5</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 5<span>More Notes</span></a></td>
</tr>
<tr>
<td><span class="s6">■</span> Name 6</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Yet more notes</span></a></td>
</tr>
</tbody>
</table>
</body>
</html>
我遇到的问题是来自其他值的文本通过工具提示文本显示。
将鼠标悬停在第一行第二列上可以看到效果。
我想完成几件事:
使悬停的激活区域更宽，因此将鼠标悬停在“状态 6”右侧的某个空间上会调出工具提示(例如，目标总宽度为 100-150 像素)。起初，当我将 display:block 添加到 a.tooltip 时，IE 在悬停时终止。我通过从 a.tooltip:hover 中删除 width:14em 解决了这个问题。在 a 元素上设置悬停事件的宽度 + display.block 会做坏事。
更改工具提示的宽度而不更改列/父 a 元素的宽度(因此工具提示可以更宽并占用更少的垂直空间)。使工具提示的宽度随其内容变化到最大宽度的选项，此时换行会很棒，但在 IE 中可能是不可能的。一旦我在 a.tooltip 上设置了宽度，悬停源之外的其他行上方的工具提示部分就会让文本从这些单元格中显示出来。移除宽度，您会看到文本不再显示。
悬停效果适用于整个工具提示，因此如果工具提示覆盖 3 行，当向下移动鼠标时，接下来的 2 行不会激活，因为光标尚未离开工具提示。悬停效果是否仅适用于悬停的初始元素而不适用于工具提示本身，以便向下移动鼠标将在每行中显示每个工具提示？
如果链接永远不会被激活(它们无法获得焦点)就好了。我不知道这是否可能。可惜 IE 不支持悬停在除链接以外的任何元素上。
注意:很快 IE6 将被 IE7 取代。如果它有很大的不同，那么 IE7 可以作为目标浏览器。
感谢您的帮助。
最佳答案
单靠 css 是无法解决这些问题的。如您所知，IE 不支持 :hover 伪选择器，因此您需要通过添加 href="javascript:void(0);"使链接处于非事件状态。到您的链接。
我强烈推荐http://craigsworks.com/projects/qtip/作为 jquery 解决方案。您可以专门设置悬停条件，功能会随着 js 关闭而降低，甚至可以与 IE6 一起使用。此外，您可以将这些工具提示应用于任何标签，从而解决您的 anchor 问题。
即使使用这个插件，您仍然会遇到工具提示与列表内容重叠的问题，因此您应该将它们放在列表的一侧。这样您就可以将鼠标直接悬停在列表下方，而不会受到工具提示的干扰。
关于html - CSS IE 悬停效果 - 重叠元素、显示 :Block, 和崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2384231/
25
4
0
我对具有 2 个轴的数据有交叉识别问题，例如 A = array([['x0', 'y0', 'data0', 'data0'], ['x0', 'y0', 'data0', '
我知道这是代码有点傻，但有人可以解释为什么 isList [42]返回 True而isList2 [42]打印 False ，以及如何防止这种情况？我想更好地理解一些更晦涩的 GHC 类型扩展，我认为
我正在使用memmove()，但目标似乎正在覆盖源，或者也许我不明白覆盖是什么。我有一个 char 数组(目标)，然后是一个指向目标的指针，该指针位于 vector 内部。 char destinat
以下AS3代码有时会导致音频多次播放，就像疯狂的回声一样，几乎同时播放。通常使用该URL都可以，但是当我使用https://soundcloud.com url时，它总是会发疯。在极少数情况下，我认为
我正在尝试在 android 2.2 中实现类似操作栏的东西。这是我的 main.xml
如何避免第一个值的重叠问题 而且，我怎样才能看到最后一个被剪裁的值？ 最佳答案 我认为您在修改轴上的样式和调整视口(viewport)之间有几种选择。 我会尝试: 禁用左轴，启用右轴 chart.le
我正在构建一个简单的应用程序，您可以在其中使用纸娃娃之类的工具来描述您的外观。 Check out this image.计划是有 4 个水平 ScrollView :第一个用于发型，第二个用于面部毛
我有一个问题...我在绝对布局中有两个 ScrollView 。换句话说，它们是全屏的并且相互重叠 上面的scrollview是水平滚动的，下面的是垂直滚动的scrollview。 当我水平滚动时，我
我看了一些类似的问题，但我不太明白在我的层次结构中我应该做什么？ 我有 用于屏幕底部的标签菜单 和 对于其他将创建的 fragment 。 我有 9 个标签菜单，每个都是 fragment 。 一
在我的 Android 应用程序中，我有一个编辑文本和一个按钮，单击该按钮会向我的主要 Activity 添加一个 fragment ，其中包含在我的编辑文本中写入的消息。问题是，当我更改消息并单击按
在我的分段控件中，有时标题比其段宽。我怎样才能让它截断？ 假设第 1 段的标题是 Text overlaps，第 2 段的名称是 ok。 我希望它看起来如何: [Text ov...| ok
我想创建一个带有重叠单元格的 uitableview，如下图所示。问题是，即使我为单元格的内容 View 设置 clipsToBounds = NO，单元格假标题(例如，将与前一个单元格重叠的西类牙语
有了这个CSS .addProblemClass{ width:300px; height:300px; /*width:25%; height:40%;*/
我有跨窗口移动的图像(2 行)，当我离开页面选项卡时，然后返回它，所有图像都相互堆叠。 JS代码(记入jfriend00) function startMoving(img) { va
这是我的一段代码。图像在 23 毫秒后正常可见，但永远不会像第二行所示那样返回隐藏状态。如果我将其从 17 毫秒更改为大于 23 毫秒的值，它就会起作用。反之亦然，如果我将第一行更改为 16 毫秒，它
我正在可汗学院为学校项目编写一款太空入侵者游戏，但我不知道如何在子弹和外星人之间进行碰撞，然后摆脱子弹所碰撞的外星人。这是非常基本的 JS，尽管我尝试过，但我不太明白如何将有关该主题的其他答案放入我的
当我尝试重新加载 tableView 的数据时出现奇怪的重叠，导致单元格的高度发生变化(使用 UITableViewAutomaticDimension)，然后内容与上面的单元格重叠，无法弄清楚怎么做
我是一个新手，如果这是一个愚蠢的问题，请原谅我。我想有一个部分与标题分开，但发生了两种情况: (1) 当我把 在 下面，它们相互重叠，如下所示: Section overlapping header
我正在尝试创建两个 那是重叠的。唯一的问题是第二个 在第一个的前面它必须是相反的。我尝试设置第一个 的 z-index至 1但它仍然不起作用。 这是我的代码: #content{ backgrou
是否有重叠 2 个 div 的有效方法。 我有以下内容，但无法让它们重叠。 #top-border{width:100%; height:60px; background:url(image.jpg)
我是一名优秀的程序员,十分优秀！