Question

在我的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));

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

提前致谢!!

我的radiobutton：

<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')

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

Answer 1

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

所以如果你想让它完全不透明，只需使用：

.tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}

Answer 2

解决。

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

更改不透明度属性并将渐变应用于Bootstrap工具提示

2 个答案: