更改不透明度屬性並將漸變應用於引導工具提示

在我的MVC3項目中（使用Twiter Bootstrap），我有一個帶有兩個單選按鈕的頁面。當鼠標懸停在第二個上時，視圖顯示Bootstrap工具提示。此外，我有一個JS功能，改變該工具提示的CSS外觀，將其變爲黃色。更改不透明度屬性並將漸變應用於引導工具提示

我想刪除透明度，並通過添加一些CSS屬性到我的JS函數應用漸變。這樣的事情：

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

UPDATE：幾乎解決。設置漸變：

$('.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')

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

來源

2013-03-27 equisde

你可以這樣做，而不是：$（」 .tooltip-inner'）。css（{'background-color'：color，'color'：textcolor，'font-weight'：'bold'}）; – karaxuna 2013-03-27 13:00:18

@karaxuna謝謝，但只是優化現有的JS代碼，並不能解決我的問題。 – equisde 2013-03-27 13:07:31

我知道它不會解決你的問題:) – karaxuna 2013-03-27 13:10:20

解決

bootstrap.css重疊了javascript中定義的CSS樣式，所以我改變了bootstrap.css中的opacity值，但是，有沒有辦法在不修改CSS的情況下做到這一點？

來源

2013-03-27 16:21:31 equisde

您可以通過使用標識符改變工具提示的不透明度：.tooltip.in

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

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

來源

2015-05-27 03:47:37 pauloz1890

更改不透明度屬性並將漸變應用於引導工具提示

回答

相關問題