jQuery的背景色铬

Question

我遇到了一个示例问题，该示例应在JQuery中的悬停事件上更改背景色。 （与.css("background-color","rgba(78, 175, 212, 0.75)"); ）

所有其他更改均有效，甚至不透明，但背景颜色始终不更改，而背景颜色始终更改为“ rgb(0, 0, 0) ”。 此错误仅出现在Chrome上，而不出现在IE或Mozilla（所有最新版本）上。

我指定.over类在处理之前不具有background-color或opacity属性。

这是示例：

jQuery(document).on({
    mouseenter: function(){
        jQuery(".over, .overVideo",this).clearQueue()
                .css("display", "block")
                .css("height", "200px")
                .animate({height:'350px'},{duration:200})
                .css("opacity", "0.5")
                .css("background-color","rgba(78, 175, 212, 0.75)");

        jQuery(".blur, .blurVideo",this).clearQueue()
                .css("height", "200px")
                .animate({height: '350px'},{duration:200});
    },

...

我尝试移动背景颜色线，尝试设置另一种颜色，例如“蓝色”，“＃fff”或“ rgb（12,12,12）”，但始终存在相同的问题。

你能帮助我吗 ？

Answer 1

因此，我继续使用jsfiddle并做了符合您要求的内容。

HTML：

<div class="hoverme" style="width:100px;height:100px;background-color:black;">

jQuery的：

  $(document).ready(function() {
  $('.hoverme').hover(function(){
  $(this).css("background-color","rgba(78,175,212,0.75)");
  })
});

它可以处理基本的背景色，您只需添加其余的颜色即可解决您的问题！

Answer 2

将回调用于动画方法：

jQuery(".over, .overVideo",this).clearQueue()
     .css("display", "block")
     .css("height", "200px")
     .animate({height:'350px'},{duration:200},function(){
         $(this).css("opacity", "0.5")
         $(this).css("background-color","rgba(78, 175, 212, 0.75)");
})

我还建议您使用css方法，如下所示，而不是使用单个声明：

.css({display: 'block',height: '200px'});

短手。