Question

我正在使用像这样定义的bootstrap css工具提示类：

    .tooltip{display:none;color:#000;text-align:left;}
    .tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
    .tooltip.top{margin-top:-10px;text-align:center}
    .tooltip.top{margin-top:-10px;text-align:center}
    .tooltip.right{margin-left:10px} 
    ...

我想创建.tooltip类的不同版本。红色，蓝色，橙色等。

我想创建类

.red-tooltip{display:none;color:red;text-align:left;}
.red-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
.red-tooltip.top{margin-top:-8px;text-align:center}
.red-tooltip.top{margin-top:-7px;text-align:center}
.red-tooltip.right{margin-left:6px}

.blue-tooltip{display:none;color:blue;text-align:left;}
.blue-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
.blue-tooltip.top{margin-top:-18px;text-align:center}
.blue-tooltip.top{margin-top:-27px;text-align:center}
.blue-tooltip.right{margin-left:6px}

如何使用.tooltip

动态更改.blue-tooltip内容

我可以通过jquery吗？

Answer 1

如果要将一个类切换到另一个类，可以使用：

$('.tooltip').toggleClass('tooltip blue-tooltip');

这会将所有.tooltip元素切换为blue-tooltip类。

现在，如果你想特别将它设置为蓝色，红色或任何颜色，你需要使用你的选择器更具说明性。

将css类属性与另一个属性更改为动态

1 个答案: