jquery - 将鼠标悬停在 float div 上时无法更改不透明度

Question

我在这里制作了一个 JS Fiddle，它可以正常工作，但是它在我的开发站点中不起作用。

http://jsfiddle.net/yr7rmho0/

网站正在运行 Wordpress，上面的链接包含我网站上内容的精简版本。

基本上，我有一个 Wordpress 侧边栏元素，包含在 <li> 中标签。我向该标签添加一个类，使其在滚动时 float 在左下角。

我想在 CSS 中将不透明度设置为 0.25，并使其在悬停时显示为完全不透明。我的问题是，在开发网站上，悬停时，不透明度没有发生变化。 div 是最上层，因为我可以单击它并与之交互。

$('#request-consultation.fixed-bottom-left').hover(
    function() { $( this ).fadeTo( 'fast', '1'); },
    function() { $( this ).fadeTo( 'slow', '.25'); }
);

我不明白为什么它不能在网站上运行，但可以在 JS Fiddle 中运行？

更新:

我注意到，如果我将上面的代码更改为 ID，它可以正常工作，但它也会影响侧边栏元素不 float 的情况(我有一个添加了固定左下角的脚本)滚动时的类)。如果我使用该类，则不会发生任何事情。

因此，小部件的 ID 有效，并且类 widget-container适用于所有侧边栏小部件。但如果我只是选择fixed-bottom-left作为一个单独的类，什么也没有发生。我相信这就是这个类的问题。但为什么呢？

Answer 1

为什么不使用CSS？

#request-consultation.fixed-bottom-left {
    opacity:.25;
    transition:all 0.3s linear;
}
#request-consultation.fixed-bottom-left:hover{
    opacity:1;
    transition:all 1s linear;
}

更新 对于较旧的浏览器

#request-consultation.fixed-bottom-left {
    opacity:.25;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
#request-consultation.fixed-bottom-left:hover{
    opacity:1;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}