onmouseover 不透明度更改不起作用答案

【问题标题】：onmouseover opacity change isn't workingonmouseover 不透明度更改不起作用
【发布时间】：2015-05-08 23:49:13
【问题描述】：

知道为什么这不起作用吗？ CSS 中的默认样式是 opacity = 0。不仅我想要显示的 div 中的不透明度不会改变，而且当鼠标移过链接时，它甚至不会将其显示为链接。（当我使用“可见性”而不是不透明度属性时效果很好，但由于触发“onmouseout”事件的动作会导致闪烁）

<a href="#" onMouseOver=" document.getElementById('pop_up1').style.opacity = 1" onMouseOut="document.getElementById('pop_up1').style.opacity = 0">

这是 CSS：

#pop_up1 {
    opacity: 0;
    position:fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
}

哦，等等，我想我看到了问题所在。即使#pop_up1 div 是不可见的，它仍然在所有链接上，因此鼠标根本没有注册任何内容。有没有办法解决这个问题？

【问题讨论】：

实际问题的演示会很有用...目前我们没有足够的代码继续。
您的代码运行良好，正如您在此处看到的那样：jsfiddle.net/alvaromenendez/zrhrkpm9 所以基本上错误出在其他任何地方...（您的atag 关闭了吗？）
好的，我发现的最佳解决方案是将可见性更改为 1 onmouseover，但不是使用“onmouseout”，而是将可见性更改回 0 在实际的#pop_up1 div 上（使用 onclick 代替）。这更有意义！

标签： css opacity

【解决方案1】：

“哦，等等，我想我看到了问题所在。即使 #pop_up1 div 是看不见它仍然在所有链接上，因此什么都没有完全由鼠标注册。有没有办法解决这个问题？”

-- 使用display:none 代替 opacity 来隐藏它，比如

#pop_up1 {
    display:none;
    position:fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
}

【讨论】：