CSS：改變鼠標懸停的背景顏色不透明度

我有一個DIV，我想改變背景顏色不透明度，取決於鼠標是否在它上面。CSS：改變鼠標懸停的背景顏色不透明度

我知道你可以使用background: rgba(54, 25, 25, .5)等，但我想單獨設置顏色。有沒有什麼辦法可以修改OPACITY，而不是顏色。

我可以opacity: 0.3等，但是影響整個DIV，我只是想影響背景顏色。

感謝您的任何幫助。

2012-04-30 Chuck Le Butt

沒有HTML/CSS沒有內置在該選項，但是因爲你在javascript中訪問/設置顏色，所以你可以添加你自己的函數，它可以爲你處理。

下面是一個例子給你：

<script type="text/javascript"> 
function RGBA(red,green,blue,alpha) { 
    this.red = red; 
    this.green = green; 
    this.blue = blue; 
    this.alpha = alpha; 
    this.getCSS = function() { 
     return "rgba("+this.red+","+this.green+","+this.blue+","+this.alpha+")"; 
    } 
} 

// store a copy of the color 
var bgColor = new RGBA(255,0,0,0.5); 

function setBgOpacity(elem, opac) { 
    bgColor.alpha = opac; 
    elem.style.backgroundColor = bgColor.getCSS(); 
} 
</script>

然後在HTML中使用的onmouseover事件改變BGCOLOR的不透明度：

<div onmouseover="setBgOpacity(this, '0.3');" 
    onmousout="setBgOpacity(this, '0.5');">Put your mouse over me</div>

來源

2012-04-30 18:25:46 Ozzy

解決這個特殊問題的好方法。謝謝！ –

只是爲了澄清'不透明'和rgb'alpha'之間的混淆事項的一小點 - 我會將函數從'setBgOpacity'重命名爲'setBgAlpha'。 –

RGBa和不透明度中的Alpha值有差異。不透明度影響所有兒童元素，Alpha不會。

您必須閱讀當前的顏色值，然後使用新的Alpha值將其重新標記爲RGBa。您可能需要將當前的十六進制顏色值轉換爲十進制三元組才能完成此操作。

來源

2012-04-30 18:12:04

沒有意義，因爲它更容易保留顏色的副本並進行編輯。請參閱我的示例http://stackoverflow.com/a/10388640/1031312 – Ozzy

感謝您解釋不透明度和RGBa之間的差異。 – Vincent

如果您依賴RGBA修改背景色的不透明度，否則無法將其與顏色本身分開設置。您必須爲正常和懸停狀態聲明明確的RGBA值。

來源

2012-04-30 18:12:06 chipcullen

不，你不能只編輯rgba的alpha。所以你應該使用RGBa的RGB部分。

來源

2012-04-30 18:12:42

可以使不同的div背景部分，並設置div的不透明度，即

<div id="container"> 
    <div id="background"></div> 
    <div id="content"> 
     <p>Lorum ipsum...</p> 
    </div> 
</div>

而且

#background { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#FF0000; 
} 
#background:hover { opacity:0.3; } 
#content { position:relative; z-index:10; }

來源

2012-04-30 18:16:24 Jeff

#container {overflow：hidden;位置：相對; } – Natasha

如果你想從容器中一個單獨的背景顏色您可能需要使用:before或:after。

.container { 
    position: relative; 

    &:before { 
     content: ''; 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     background-color: #000; 
     opacity: 1; 
     z-index: -1; 
    } 

    &:hover { 
     &:before { 
      opacity: 0.5; 
     } 
    } 

    .content { 
     z-index: 1; 
    } 
}

當你將鼠標懸停在.container，只有:before的不透明度影響，而不是內容。

來源

2017-06-22 14:25:08

CSS：改變鼠標懸停的背景顏色不透明度

回答

相關問題