2

在我的 MVC3 项目（使用 Twiter Bootstrap）中，我有一个带有两个单选按钮的页面。将鼠标悬停在第二个视图上时，视图会显示 Bootstrap 工具提示。此外，我有一个 JS 函数，可以更改该工具提示的 CSS 外观，将其变为黄色。

我想通过向我的 JS 函数添加一些 css 属性来删除透明度并应用渐变。像这样的东西：

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FCEEC1),color-stop(100%,#EEDC94));

我已经尝试了一千种方法，但我做不到。请你帮助我好吗？

提前致谢！！

我的单选按钮：

<span class="radio-button-revoked" title="CAUTION! Selecting this option will cause the revocation of the order delivery">
@Html.RadioButtonFor(model => model.Status, 0, new { style = "margin-top: 0px;" })</span><span class="text-error"><strong> Not delivered</strong>
</span>

我的 JS：

function changeTooltipColorTo(color, textcolor) {
    $('.tooltip-inner').css('background-color', color)
    $('.tooltip-inner').css('color', textcolor)
    $('.tooltip-inner').css('font-weight', 'bold')
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color);
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color);
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color);
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}

$(document).ready(function () {
    $("[rel=tooltip]").tooltip();
    $('.radio-button-revoked').hover(function() {changeTooltipColorTo('#F89406','#404040')});
});

更新：几乎解决了。设置渐变：

$('.tooltip-inner').css('background-image', '-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FCEEC1),color-stop(100%,#E4BF46))')

我注意到我可以通过将值从 0.1 设置为 1 来玩渐变：

$('.tooltip-inner').css('opacity', '0.1')

$('.tooltip-inner').css('opacity', '1')

但我不能让它完全不透明:(

4

2 回答 2

3

您可以使用标识符更改工具提示的不透明度：.tooltip.in

因此，如果您希望它完全不透明，只需使用：

.tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}
于 2015-05-27T03:47:37.900 回答
0

解决了。

bootstrap.css 与 javascript 中定义的 CSS 样式重叠，所以我更改了 bootstrap.css 中的不透明度值，但是，有没有办法在不修改 CSS 的情况下做到这一点？

于 2013-03-27T16:21:31.913 回答