使用带有position:absolute的li时,IE8不会悬停

2023-11-30

我有一种图像地图,我在其中使用 li 来创建元素,并将鼠标悬停在弹出的信息上。 html代码是:

<li id="b906" style="z-index: 1000;">
    <a href="#">
        <span>&nbsp;</span>
        <span class="para">Some text and maybe an image goes here.</span>
    </a>
</li>

对应HTML的CSS代码为:

#map ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
display: block;
}

#map ul li a {
color: #000;
text-decoration: none;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}

#map ul li:hover a {
display: block;
}

#map ul li a span {
display: block;
width: 100%;
height: 120px;
border: 2px solid #777;
}

#map ul li a span.para {
display: block;
background: #777;
padding: 2px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100px;
}

这在所有浏览器中都表现出色,但 IE8 不会在悬停时显示跨度。但是,如果我放置边框:1pxsolid red;在 li 上,跨度确实会显示,但前提是我的鼠标正好位于 1px 的细边框上。如果光标仍然不显示inside the li.

我在这里做错了什么? :( 谢谢您的帮助。


Internet Explorer 在处理 :hover 事件时存在一些问题,尤其是对于 li 元素。你需要使用这个:http://www.xs4all.nl/~peterned/csshover.html

那么应该为你工作。 如果所有其他方法都失败了,就我而言,我使用 jQuery 的悬停意图来可靠地显示菜单。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用带有position:absolute的li时,IE8不会悬停 的相关文章

  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的
  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 链接无效

    我正在尝试使用以下命令创建一组指向页面中特定部分的链接 a href 符号 但它似乎不起作用 点击链接似乎没有任何反应right click gt open in a new tab更改 url 但不会移动到页面的其他部分 我使用的是火狐浏
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • XAML 中 BackKeyPress 的挂钩命令

    有没有办法将 BackKeyPressed 事件连接到视图 XAML 中的命令 我正在使用 MVVM Light 我有一些可以显示的登录 注册屏幕 如果他们处于登录 注册过程中 这只是显示 隐藏用户控件 我希望能够拦截后退按钮 以便我可以显
  • 离子科尔多瓦相机不工作

    我正在使用以下内容Git 请参阅此处的代码 作为 Phonegap Build 的输入 并已在我的手机上正确安装该应用程序 iOS 该应用程序正确打开 但当我尝试拍照 单击按钮 时没有任何反应 它应该显示相机拍摄的图像 有人可以向我解释什么
  • 如何使用java从同一tomcat中的不同项目获取tomcat项目路径

    我正在使用此代码读取 tomcat 项目 称为 Project1 中的文件 现在我想使用 java util concurrent Tomcat 项目 称为 Project2 在不同的 tomcat 项目 称为 Project2 中获取此路
  • 图像预加载器如何工作?

    我很难理解图像预加载器的工作原理在java脚本中 因此 如果有人能用一个例子来解释他们如何工作 那将会有很大帮助 没有jquery 加载单个图像 浏览器将异步加载图像 这意味着当浏览器被赋予 src图像的 它将开始在后台加载该图像 但也会在
  • Java网络服务器和TIME_WAIT

    我在接收来自我公司生产的设备的信号的网络服务器方面遇到了问题 设备偶尔会重用刚刚使用过的源端口 这会导致 SYN 被服务器丢弃 然后设备会重试 直到旧套接字超出服务器上的 TIME WAIT 状态 然后服务器发送 SYN ACK 服务器是用
  • 如何在 howler.js 上链接声音

    我需要在 howler js 中播放一些声音 但我不知道如何链接它 例如 在字符串 BCG 需要先玩 b ogg 然后玩 c ogg 最后玩 g ogg 如果我只是使用 加载后 sound play b sound play c sound
  • 单击 Javascript 中的按钮显示 android DatePicker

    这是我的要求 我正在将一个 html 文件加载到 WebView 上 我在 html 文件中有一个按钮来选择日期 当我单击该按钮时 我想打开 Android 日期选择器对话框 选择日期后 我想在 html 文件中显示所选日期 谁能指导我 请
  • 如何使用半透明选择器选择屏幕上任意位置的颜色?

    小免责声明 这是我第一次在表单中搞乱图形 因此我对这里的概念不太熟悉 好吧 所以我一直在尝试制作一个应用程序来跟踪光标在整个屏幕中的位置并在其周围绘制一个椭圆 我借用的代码来自this问题 我更改了椭圆的 X 和 Y 位置 以便在光标周围自
  • 数据框的子集,其中一列的倒数第二个值

    我有一个包含很多列的 data frame 其中一列包含样本区域的代码 另一列包含样本的编号 我想从每个样本区域的倒数第二个样本中提取信息子集 我尝试了很多不同的事情 最后这是我最好的猜测 但它仍然不起作用 site lt sample 1
  • python 中的 list.insert() 实际上做了什么?

    我有这样的代码 squares for value in range 1 5 squares insert value 1 value 2 print squares print squares 0 print len squares 输出
  • nvd3 堆积面积图看起来有问题如何修复?

    我的堆积面积图如下所示 我使用的数据具有相同数量的值 就像示例中一样 我使用的数据位于 http pastebin com D07hja76 除了选择器之外 我使用的代码也几乎相似 var colors d3 scale category2
  • isEqualNode 因 html 空白不同而失败

    当我使用使用不同空格的 html 字符串时 我发现 Node isEqualNode 方法出现意外行为 无论有或没有空格 html 结构都是等效的 但 innerText 属性具有不同的值 这仅用于测试目的 因此不要对 html 字符串投反
  • 您可以编写单个 FetchXML 查询来获取一对多关系吗?

    是否可以编写一个获取根实体和多个子实体的 FetchXML 查询 我能做的就是1 1 詹姆斯 伍德是正确的 获取 XML 是递 归的 因此通过使用链接实体 您可以获得所需的信息 例如 以下内容是有效的
  • 用于在 HTML 中查找类名的正则表达式

    我想用grep找出是否 何处在一堆文件中使用了 html 类 正则表达式模式不仅应该找到 p class foo 但是也 p p class foo bar foo bar 到目前为止 我能够在下面的示例中找到 class foo 但无法使
  • 如何用Java读取视频文件的第一个和最后一个64kb?

    我想使用字幕 API 它需要视频文件的第一个和最后一个 64kb 的 md5 哈希值 我知道如何执行 md5 部分 只是想知道如何获取 128kb 的数据 Python 给出了 API 的示例 但遗憾的是我不明白它 this hash fu
  • 如何正确实现 C++ 中仅由抽象基已知的对象列表的创建(和分配)?

    我应该更喜欢堆栈分配而不是堆分配 最好按值传递 特别是当你正在创建新对象时 但同时 如果您按基类返回 您的对象将被切片 or 至少通过引用而不是传递指针 虽然您无法创建引用向量 我仔细地读了这一切 现在我觉得我知道的比以前知道的少了 我对如
  • 如何有效地使用 CompletableFuture 来映射每个输入的异步任务

    我想返回包含所有键到值的映射的映射 这些值是 API 对这些键的响应 我在用CompletableFuture and Guava为了这 以下是我的尝试 是否有其他标准方法可以使用 Java 8 和线程 API 实现相同的效果 地图正在id
  • numpy 用整数增量替换元素组

    import numpy as np data np array b b b a a a a c c d d d 我需要像这样逐步用整数替换每组字符串 data np array 0 0 0 1 1 1 1 2 2 3 3 3 我正在寻找一
  • 如何输入长度超过 4095 个字符的值?

    我试图input 包含大量 JSON 粘贴的字符串 为什么我要粘贴一大堆 json 超出了我的问题范围 但是当我说我有一个不完全愚蠢的原因时 请相信我 然而 input 仅抓取粘贴的前 4095 个字符 原因见这个答案 我的代码大致如下 i
  • 使用带有position:absolute的li时,IE8不会悬停

    我有一种图像地图 我在其中使用 li 来创建元素 并将鼠标悬停在弹出的信息上 html代码是 li a href span nbsp span span class para Some text and maybe an image goe