悬停时奇怪的不透明度变化仅出现在 Firefox 和 IE 中答案

【问题标题】：Strange opacity change on hover only appearing in Firefox and IE悬停时奇怪的不透明度变化仅出现在 Firefox 和 IE 中
【发布时间】：2013-08-22 12:17:47
【问题描述】：

我正在测试我的最新设计，但有一个具体问题我无法弄清楚。

当我悬停该元素时，似乎某个特定元素正在触发不透明度更改。根据我的测试，这只发生在 Firefox 和 IE 中。它不会发生在 Chrome 中。

我最好的猜测是，这是由于某种特定于浏览器的 CSS 而发生的，但我无法在任何导致这种不透明度变化的元素上找到任何 CSS。

其中一个问题是我通常在需要发现源代码问题时使用 Chrome F12，而我在 Firefox 和 Chrome 中很难找到悬停 CSS 效果。

这是我的测试站点的链接，当您打开手风琴选项卡“Vælg Stof Indvendig”并悬停图像时，您可以在 Firefox 和 IE 中看到问题： http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer

【问题讨论】：

【解决方案1】：

我看不到您的网站，但您是否在 CSS 顶部使用了重置？这通常可以解决这样的问题。有些浏览器默认会做一些奇怪的事情！

【讨论】：

【解决方案2】：

您的 css 显示以下内容：.product-field-display:hover { opacity: 0.5; }

因为.product-field-display 元素是一个span 包装div，Chrome 基本上使它成为一个非元素（高度/宽度为0 并且在页面上没有位置）。但 Firefox 仍在对它做出反应（我猜 IE 也是）。

【讨论】：