如何强制 Opera 的悬停触发
我在 Opera 浏览器中悬停时遇到一个奇怪的问题。 这是测试用例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>opera hover issues</title>
</head>
<style>
.item {
background-color:pink;
border:1px solid red;
color: maroon;
height:100px;
width:300px;
}
.item a {
display:none;
}
.item:hover a{
display:block;
}
.item a:hover {
font-weight:bold;
background-color: yellow;
}
</style>
<body>
<div class="item">
an item - 0
<a href="javascript:void(0)">remove</a>
</div>
<div class="item">
an item - 1
<a href="javascript:void(0)">remove</a>
</div>
<div class="item">
an item - 2
<a href="javascript:void(0)">remove</a>
</div>
</body>
<script>
document.onclick = function(evt) {
var el = evt.target;
if (el.nodeName == 'A') {
var to_remove = el.parentNode;
to_remove.parentNode.removeChild(to_remove);
}
}
</script>
尝试单击第一项的“删除”链接 正如您将看到的，在 Opera 中（至少在 Opera 9.61 中），只有移动鼠标后才会触发 сss 定义的悬停。
有人尝试解决这个问题吗？
提前致谢！
I have a strange problem with hover in Opera browser.
Here's the test case:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>opera hover issues</title>
</head>
<style>
.item {
background-color:pink;
border:1px solid red;
color: maroon;
height:100px;
width:300px;
}
.item a {
display:none;
}
.item:hover a{
display:block;
}
.item a:hover {
font-weight:bold;
background-color: yellow;
}
</style>
<body>
<div class="item">
an item - 0
<a href="javascript:void(0)">remove</a>
</div>
<div class="item">
an item - 1
<a href="javascript:void(0)">remove</a>
</div>
<div class="item">
an item - 2
<a href="javascript:void(0)">remove</a>
</div>
</body>
<script>
document.onclick = function(evt) {
var el = evt.target;
if (el.nodeName == 'A') {
var to_remove = el.parentNode;
to_remove.parentNode.removeChild(to_remove);
}
}
</script>
Try to click first item's "remove" link
As you will be able to see, in Opera (at least in Opera 9.61) сss-defined hover does not trigger till mouse is moved.
Has anyone tried to solve this issue?
thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我已经尝试过 -
- 强制onscroll触发，调用window.scrollBy；
- 通过隐藏/显示元素强制回流/重绘；
- 设置 marginTop 并将其重置为默认值。
海拉斯，问题依然存在（
i've already tried to -
- Force onscroll trigger, calling window.scrollBy;
- Force reflow/redraw via hiding/showing the element;
- Set marginTop and resetting it to the default value.
Helas, the problem remains (
有趣的案例。我对此没有答案，但我想请您在 https 上向 Opera 报告错误://bugs.opera.com/wizard/（如果您还没有）。
Interesting case. I don't have an answer to this, but I would like to ask you to report a bug to Opera on https://bugs.opera.com/wizard/ if you haven't already.