javascript - onmouseover 不处理 z-index 大于 1 的元素-6ren

javascript - onmouseover 不处理 z-index 大于 1 的元素

转载作者：行者123 更新时间：2023-11-28 18:57:35

27

4

我在使用 javascript 制作网站时遇到问题。我想要做的是有一个时间线，当鼠标经过每个节点时，两边的信息都会更新。但是，我无法通过鼠标悬停来使用节点。我相信这种情况正在发生，因为它们都超过了基线，它们每个的 z-index 都是 2。有人能帮我解决这个问题吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="site.css">
        <title></title>
        <script type="text/javascript">
            baseLine =  new Image()
            dash =      new Image()
            baby =      new Image()
            brokenleg = new Image()
            compsci =   new Image()
            grad =      new Image()
            inhaler =   new Image()
            orioles =   new Image()
            python =    new Image()
            qohs =      new Image()
            bus =       new Image()

            baseLine.src="LineBase.png"
            dash.src="images/dash.png"
            baby.src="images/baby.png"
            brokenleg.src="images/brokenleg.png"
            compsci.src="images/compsci.png"
            grad.src="images/grad.png"
            inhaler.src="images/inhaler.png"
            orioles.src="images/orioles.png"
            python.src="images/python.png"
            qohs.src="images/qohs.png"
            bus.src="images/bus.png"
        </script>

        <script type="text/javascript">
            function mouseOver()
            {
                alert(1); //testing purposes
            }   
        </script>
    </head>
    <body>
        <div id="container">

            <div id="picture-container">
                <img id="tagImage" src="images/baby.png" name="tag" onmouseover="alert(1)"/> // this works
            </div>

            <div id="time-line">
                <img id="base" src="images/LineBase.png" />

                <img class="dash" src="images/dash.png" onmouseover="alert(1)"/> // but this doesn't
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
                <img class="dash" src="images/dash.png" />
            </div>
            <div id="story-box">
                <h1 id="hey">hey</h1>
            </div>

        </div>
    </body>
</html>

最佳答案

在 Firefox 中你的 fiddle似乎工作正常，但在 Chrome 和 IE 中 #base 与第二个 .dash 重叠。它不起作用的原因是，虽然您为 .dash 设置了 z-index:2，但您还没有设置 的 position >绝对、相对 或固定。如果没有这些定位属性之一，z-index 将无法工作，因此 .dash 会留在 #base 之后。

.dash {
    z-index:2;
    float: left;
    position: relative; /* add this */
}

实例:http://jsfiddle.net/tw16/wfBX9/9/

关于javascript - onmouseover 不处理 z-index 大于 1 的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7302301/

27

4

0

文章推荐： css - 覆盖属性

文章推荐： android - Twilio 是否足以进行国际短信验证？

文章推荐： teamcity 中的 python nose 测试报告

C++ 字符串。为什么答案显示字符串 "dog"大于 "cat"，然后 "cat"大于 "dog"？
我不太确定为什么较大字符串(“cat”和“dog”)的答案不一致。我正在用链接列表和模板的使用做一些事情。我的好奇心促使我修改模板和函数重载。如果有人能解释发生了什么，我将不胜感激。谢谢你。 #inc
MySQL 大于 IN
目前我必须编写这样的查询 SELECT * FROM table WHERE value1 > 5000 OR value2 > 5000 OR value3 > 5000 OR value4 > 5
SQL 大于、等于和小于
我想创建一个如下所示的查询，但我不确定如何正确编码，我希望它在开始时间的 1 小时内返回所有预订，这是我想出的: SELECT BookingId, StartTime FROM Booking W
JavaScript:小于 + 大于
这个问题已经有答案了: How to check if a number is between two values? (12 个回答) 已关闭 6 年前。我目前正在 Codecademy 上学习
jquery - 大于/小于问题
我想验证用户输入。如果用户输入的数字大于 3，则应抛出错误“Too high”，如果小于 0.15，则应抛出“Too low”错误。如果它在 3 到 0.15 之间，那么它应该显示“好的”。我的代码
jquery 大于/小于只查看第一个数字？
我有一个拖动脚本，我在其中拖动 div.slider，我正在跟踪 div.slider 的“左”值，并在它大于 68 时让它淡出，但问题是它当它达到 6 而不是 68 时淡出。如果我将数字更改为 85
sql - 如何在数据库中存储小于/大于
是否有一种常见的模式如何在数据库(postgresql)中存储这样的条件，然后以简单的方式从数据库中获取这些数据，并在前端将其与我们在前端的值 SE 进行比较(以获得正确的“值” "): condit
java - 大于/小于在内部工作的程度
如何大于/小于内部工作如果我将 5 与 100 与 5 与 2,147,483,647 (Integer.MAX_VALUE) 进行比较，性能会受到多大影响 5 < 100 and 5 < Inte
mysql:条件语句问题，大于
当我运行此查询时它有效 SELECT sum( amount ) AS balance FROM balance WHERE amount >= 100 但是当我想过滤用户 ID 时，它返回 NULL
MySql 大于 group by
我有下表: account(id, balance, bank_branch) 我想选择账户余额大于其 bank_branch 平均余额的所有账户我试过了 Select id from accoun
java - lucene 大于
你们有没有人知道如何搜索所有大于指定数字的数字？例如:所有单据编号>65 我试过这样:documentNumber: [65 TO *] 但我收到异常，因为 lucene 期望解析一个没有 * 的数
Prolog - 大于 x 的数字
我正在使用 Prolog 算法，并且有一个生成抽象语法树的程序，例如 plus(num(1),num(2))这只是 1+2 .这是通过使用 DCG 来完成的。在这个例子中 plus(num(1),nu
trigonometry - 大于 360 度角的三角比
是否使用 Sin(720) 或 Cos(1440)(以度为单位的角度)？无论是在计算机编程中还是在任何其他情况下？一般来说，是否有任何角度的 Sin/Cosine/Tan 使用大于360？在物
bash - awk 大于 float
我发现了一些与此相关的问题，但没有一个真正回答了我的问题。我有一个像这样的表格文件: 2 10610 0 0 0 0.0105292 2 10649 0 0 0
Prolog 大于/2 成功
我是 Prolog 的新手，我正在尝试解决这个练习: Define a predicate greater_than/2 that takes two numerals in the notation
SQL COUNT* GROUP BY 大于，
我想选择具有出现次数的不同键，此查询似乎有效: SELECT ItemMetaData.KEY, ItemMetaData.VALUE, count(*) FROM ItemMetaData GROU
c - 大于 ULLONG_MAX 的数值
我需要存储和使用大于 ULLONG_MAX 的数值。我需要对这些值进行算术运算，所以我认为存储为 char** 不是一个选项。在这些情况下，有没有办法动态创建额外的 long 前缀？谢谢大家。根
Prolog 大于/2 成功
我是 Prolog 的新手，我正在尝试解决这个练习: Define a predicate greater_than/2 that takes two numerals in the notation
java - 大于 64 位的快速位掩码
处理已知大小但大于 64 位的位掩码(即执行所有位操作)的最有效的数据结构是什么？字节[]？大整数？完全是别的东西吗？需要与 Java 7 兼容，并且对于诸如此类的事情应该很快(或者至少与合理预
java - JTable 大于 JFrame
编辑:抱歉进行了许多编辑。我自己都忘记写了什么了。我使用 JPanel，将 BoxLayout 作为 JFrame 的根面板。我向此根面板添加了另外两个面板:带有 FlowLayou 的 Butto

首页

博学

6Ren·AI

商城

javascript - onmouseover 不处理 z-index 大于 1 的元素