1

此代码来自http://jsfiddle.net/8gC3D/471/的 Fiddle 在Tooltip with HTML content without JavaScript的答案中）应该产生一个图像，当悬停在上面时，它会消失并导致另一个元素出现在其他地方页。但这使我的浏览器行为不可预测。有时悬停没有效果，有时是延迟效果，或者只有通过鼠标的一些额外移动才能实现效果等。

<style>
#img {  }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;
}

#hoverme:hover { background-color:green;position:absolute   ;left:300px;top:100px;width:40%;height:20%;}
</style>

<body>
<p id="hoverme">
    <img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"> </img>
    <span id="thistext">LOCATZ!!!!</span>
</p>
</body>

为了理解发生了什么，通过简化等（用 ID 代替 CLASSES 等没有效果），我最后用红色背景的 div 代替了 Deviant Art 图像。这种行为只会变得更加疯狂：-

<style>
.img {
    background: red;
    width: 50px;
    height: 50px; }
.img:hover {visibility:hidden}
.thistext {font-size:22px; color:white}
.thistext:hover {color:black;}
.hoverme {width:50px;height:50px;
}
.hoverme:hover {
    background-color:green;
    position:absolute;
    left:300px;
    top:100px;
    width:40%;
    height:20%;
}
</style>

<body>
<p class="hoverme">
    <div class="img"></div>
    <span class="thistext">LOCATZ!!!!</span>
</p>
</body>

在我的浏览器 (FF) 中，这会在 LHS 页面下方约 82px 处生成一个红色方块。1. 悬停会导致以下三种行为之一： a) 它消失；b) 它消失然后又出现；c) 文字“LOCATZ!!!!” 显示在其下方。2.在红色方块或（不可见）红色方块的位置上进行各种单击或悬停，然后将光标移动到页面的左上角，有时会使红色方块消失，左上角出现一个红色方块角，以及一个距顶部 100 像素和距左侧 300 像素的绿色矩形。这些结果似乎不可预测/不稳定。

代码有什么问题，为什么会让浏览器如此困惑？！？我什至难以获得可重复的行为。

更新 谢谢，Joseph Marikle，很高兴知道，但我正在尝试了解hover和功能，visibility而不是实现 Fiddle 的代码。我一直在摆弄代码来尝试这样做，但看不出它有什么“错误”。

4

0 回答 0