Question

这似乎是很多次被问到的问题，但是我无法让它在我的情况下起作用。

我有一张桌子，桌子上的td元素带有背景色。

设置弹出窗口（带有标题和内容图像）时，我想将标题设置为与td元素具有相同的背景色。

我正在使用jquery和bootstratp 3.3.7，到目前为止，它具有以下代码（效果很好）

...

$('td').hover(function(){
                // mousein
                $(this).popover({
                        animation: true,
                        container: 'body',
                        content : $(this).attr("popover-content"),
                        title : $(this).attr("popover-title"),
                        placement : "right",
                        html : "true",
                        trigger : "manual",
                });
                $(".popover-title").css('background-color',$(this).css('background-colo
r')+' !important');
                $(this).popover('show');
        },function(){
                // mouseout
                $(this).popover('hide');
        });

...

不起作用的是更改了类popover-title上的CSS。

我必须错过一些重要的东西，以便能得到一些帮助？

谢谢保罗

Answer 1

根据jQuery docs：

注意：.css()忽略!important声明。因此，语句$( "p" ).css( "color", "red !important" )不会将页面中所有段落的颜色变为红色。强烈建议改用类。否则使用jQuery插件。

因此，您可以做的是应用许多类之一，这些类在CSS中使用!important进行单独样式设置。但是，您根本不需要!important。您所需要做的就是覆盖已经应用的样式的特异性。

Answer 2

对于解决这个特定问题的任何人，这就是我解决的方法。

1）通过添加链接到popover show事件的函数（在SO的相关文章中找到！）例如

<!-- bootstrap tooltip plugin -->
$('td').hover(function(){
        // mousein
        $(this).popover({
                animation: true,
                container: 'body',
                content : $(this).attr("popover-content"),
                title : $(this).attr("popover-title"),
                placement : "right",
                html : "true",
                trigger : "manual",
        }).on("show.bs.popover", function(){
                if ($(this).attr("popover-content")) {
                        $(this).data("bs.popover").tip().css('background-color',$(this).css('background-color'));
                } else {
                        $(this).data("bs.popover").tip().css('background-color','#107a9d');
                }
        });
        $(this).popover('show');
},function(){
        // mouseout
        $(this).popover('hide');
});

通过使背景色“继承”（大概是）tip（）css。

我可以动态更改引导程序弹出窗口标题样式吗？

2 个答案: