jquery如何使css设定好背景颜色的div去掉背景颜色？

Posted 2023-04-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery如何使css设定好背景颜色的div去掉背景颜色？相关的知识，希望对你有一定的参考价值。

如某div设定background:#FFF; ，要如何写jquery使这个div的背景变透明？

jquery使css设定好背景颜色的div去掉背景颜色,我们首先需要的就是获取到你要做这个特效的元素，jquery的话一般是都过$('#元素id')，然后在通过改css来更改这个的背景颜色，或者去掉，具体我写代码来提现:
<html>
<head>
</head>

<script>
$(function()
$('#div1').css('background','none')

)

</script>

<body>
<div id='div1'>
<p>我没有背景颜色了</p>

</div>

</body>

</html>
这样就实现了，用jquery去掉背景颜色了。参考技术A 假设DIV上的类名是 a
$('.a').css(background-color：transparent;)
这句话是背景色透明。
也可以通过：
$('.a').fadeOut('slow')
另外，还有：
$('.a').animated(opacity:1,'slow')

参考资料：A

本回答被提问者采纳参考技术B $("#这里写你的id").css("background",""); 这个绝对可以。。参考技术C $("div").css("background",""); 参考技术D $("div").css("background","");

使用jquery动态更改背景颜色后，背景颜色的CSS悬停选择器不起作用

【中文标题】使用jquery动态更改背景颜色后，背景颜色的CSS悬停选择器不起作用【英文标题】：CSS hover selector for background-color not working after dynamic change of background-color with jquery 【发布时间】：2012-02-15 11:28:17 【问题描述】：

我使用 jquery .css() 方法动态更改 div 的背景颜色。我还想在改变背景颜色的同一个 div 上有一个 CSS hover 选择器。似乎在用jquery改变颜色之前，csshover选择器可以工作，但是用jquery方法改变div之后，csshover选择器不再工作。有没有办法解决这个问题（不使用 jquery hover 方法）？

这是我所说的一个例子：http://jsfiddle.net/KVmCt/1/

【问题讨论】：

让他们都添加一个改变背景颜色的类怎么样？ div 的选择器是什么，jQuery 方法的选择器是什么？你能展示其中的一些台词吗？ @w0rldart 更新了代码示例 @DavidThomas 嗯？我要说的是hover 选择器应该可以工作，即使在我用jquery 设置好DOM 的颜色之后。但事实并非如此。您需要更清楚地了解您的问题，尤其是考虑到您已经存在很长时间并且已经提出了几百个问题。 【参考方案1】：

当您使用 jQuery 操作 css 时，它会将 css 添加到内联并覆盖样式表中的任何 css 尝试使用 jquery 添加和删除在悬停时更改颜色的类。这是工作小提琴：http://jsfiddle.net/KVmCt/6/

jQuery 看起来像这样：

$("div").hover(
function()
$(this).addClass("blue");
 
,
function()
$(this).removeClass("blue");
);

【讨论】：

或直接包含 $(this).toggleClass("blue"); 作为悬停方法参数的 1 个函数。 ;)【参考方案2】：

jquery css 方法为你的元素添加了一个内联样式，这意味着执行它之后，你的 div 看起来像

<div style="background-color: red">Hello world</div>`

现在，内联样式总是比 css 样式更优先，这就是你的问题。

那么，为什么不添加一个 CSS 类而不是使用内联样式呢？尝试以下方法：

$("div").addClass("edited");

和

div:hover, div.edited:hover 
   background-color: blue;


div.edited 
   background-color: red;

你会看到它有效。

【讨论】：

由于问题与jQuery无关，所以在原版JS中使用document.querySelector("div").classList.add("edited");。【参考方案3】：

您遇到的问题是 CSS 信息位置的重要性：

外部样式表被文档头部的 CSS 覆盖；这反过来又被 CSS 在元素的 style 属性中推翻。基本上，浏览器遇到的最后一个样式会覆盖任何先前指定的，否则会发生冲突的规则（除非使用了 !important 的关键字）。

作为 JavaScript，因此 jQuery，将其 CSS/样式信息放入元素的内联 style 属性中，此总是覆盖其他地方指定的冲突样式。

div 更重视color: red，忽略div:hover 样式。

要解决它，您可以使用：

div:hover 
    background-color: blue!important;

JS Fiddle demo.

不过，更好的解决方案是避免使用 jQuery 分配 background-color/other 样式，而只需使用 CSS：

div 
    background-color: red;


div:hover 
    background-color: blue!important;

或者，您可以使用 jQuery 的 hover() 方法：

$('div').css('background-color','red').hover(
    function()
        $(this).css('background-color','blue');
    ,
    function()
        $(this).css('background-color','red');
    );

JS Fiddle demo.

【讨论】：

@Justin - 我从来没有机会使用 jQuery 的 .css() 方法，而是在 stecb 对 Nicole 的回答的评论中切换 DOM 元素上的类 - 但只是悬停不需要 javascript正如大卫在这里所说的那样。当我遇到这个问题时，我的第一反应是使用 jQuery 的.hover() 来设置它，就像我用 CSS 编写的那样，然而，令我惊讶和沮丧的是，它仍然是不活动（即使.hover() 函数的脚本出现在其他动态变化的背景颜色脚本之后）。如果我知道将 CSS 中的规则指定为 !important 会起作用，我一开始就不会尝试用代码来纠正这个问题，但幸运的是，这个答案给了我完美的解决方案。将来，我将把它更多地放在我的脑海中。当我有一个 JQuery 命令更改类的背景颜色时，“！important”解决方案对我有用，并且该命令以某种方式禁用了 CSS 定义的悬停效果。奇怪的是，JQuery 禁用了悬停效果的 background-color 属性，但没有禁用它的 cursor 属性。无论如何，它现在可以通过添加 !important 到 CSS 中，所以谢谢。你为我节省了很多时间！这也发生在反应中。谢谢大佬！【参考方案4】：

一种简单的方法是将重要标签添加到您的 CSS。

div:hover 
    background-color: blue !important;
;

【讨论】：

【参考方案5】：

如果你只需要删除你可以使用的内联样式

$("#yourselector").attr("style", " ");

它将用style=" "替换你的内联样式

【讨论】：

以上是关于jquery如何使css设定好背景颜色的div去掉背景颜色？的主要内容，如果未能解决你的问题，请参考以下文章

css如何使div背景图片填充

设置/覆盖背景颜色时的 jQuery / CSS 优先级

使用jquery动态更改背景颜色后，背景颜色的CSS悬停选择器不起作用

悬停文本使 Div 更改颜色 - CSS

JQuery 帮助 - 动画背景颜色

如何使DIV背景透明内容不透明