Question

我有这个页面：

如果您将鼠标悬停在左上方的徽标上，它应该会“褪色”相同的徽标，并在其下方显示一些文字。

问题是，徽标部分自然会褪色，但它下方的文字看起来像是放在一起，而不是“自然”褪色。

有什么想法吗？

Answer 1

从我看到的情况来看，你的文字是在图像上写的，在鼠标悬停时有不同的背景，我认为问题是由那造成的

你可以尝试做这样的事情：

<div class="sublogo-stress" style=" ">
    <img src="/wp-content/themes/SimplePress/images/trans_120x90.png">
    <span>test</span>
</div>

您甚至可以将span的不透明度设置为0，使其完全不可见。褪色效果现在应该更好。

Answer 2

toggleClass会更改不透明度以匹配悬停类的不透明度，而不是添加类。但是，无论如何，改变类的地方将表现为文本的突然出现。看这里http://jsfiddle.net/eYJym/

您可以通过淡入0来“绕过”此效果，其中应该切换类。或者通过将不可见图层放置在原始图像上方的文本中，将其淡化为某种不透明度，然后使用原始图像隐藏图层。在没有透明度的情况下处理图像会更容易：）