Question

我在这里制作了一个正常工作的JS小提琴，但是它在我的开发网站上没有用。

网站正在运行Wordpress，上面的链接包含我网站上的缩写版本。

基本上，我有一个Wordpress侧边栏项，包含在<li>标签中。我在这个标签中添加了一个类，以便在滚动时使其浮动到左下角。

我想在CSS中将不透明度设置为.25，并使其在悬停时显示为完全不透明。我的问题是，在开发网站上，当悬停时，没有进行不透明度更改。 div是最上层，因为我可以点击并与之交互。

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

我不明白为什么它不在网站上工作，但它在JS Fiddle中？

更新：

我注意到如果我将上面的代码更改为ID，它可以正常工作，但它也会影响侧边栏元素没有浮动（我已经有一个脚本添加固定的-bottom-left类滚动时）。如果我使用该课程，则没有任何反应。

因此，窗口小部件的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;
}

将鼠标悬停在浮动div上时无法改变不透明度

1 个答案: