JQuery 背景色 chrome答案

【问题标题】：JQuery background-color chromeJQuery 背景色 chrome
【发布时间】：2023-03-11 16:44:02
【问题描述】：

我遇到了一个示例，该示例应该在 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)”，但总是同样的问题.

你能帮帮我吗？

【问题讨论】：

jsfiddle.net/arunpjohny/azmbftjq/1?

标签： jquery css hover background-color mouseenter

【解决方案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)");
  })
});

它做了基本的背景颜色，你只需要添加其余的，它应该可以解决你的问题！

【讨论】：

【解决方案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'});

简写。

【讨论】：