懸停並更改div和元素的不透明度

我在html中創建了一個包含標題，背景圖片和其頂部的ghost div的框，該框架出現在懸停鏈接上。懸停並更改div和元素的不透明度

的HTML如下：

<div class = "box-wrapper"> 
    <div class = "ghost-box"> 
    <a class = "link-button"></a> 
    </div> 
    <div class = "content-box"> 
    <h3 class = "title">Title</h3> 
    </div> 
</div>

而CSS是這樣的：

.box-wrapper {display:inline-block;} 
.ghost-box { 
    position:absolute; 
    width: 300px; 
    height: 100%; 
    background-color: rgba(1, 81, 161, 0.9); 
    opacity: 0; 
    transition: all .3s ease; 
} 
.ghost-box:hover {opacity:1;} 
.content-box { 
    width: 300px; 
    height: 180px; 
    background-image:url('example.jpg'); 
} 
.title { 
    opacity:1; 
    transition: all .3s ease; 
}

我的難題是，在鬼DIV懸停過渡的偉大工程，但我也想以影響「標題」元素。我不想減少「content-box」的不透明度，因爲我希望背景圖像仍然通過ghost div顯示，但我希望標題將其不透明度更改爲0.我嘗試了幾種組合的東西來自：

.content-box:hover:first-child {opacity:0;}

到：

.box-wrapper:hover:last-child {opcaity:0;}

，但似乎沒有奏效。有什麼建議？我希望我把事情弄清楚。

來源

2016-03-17 James Hamann

整點就是淡化內容吧？ –

如果您將鼠標懸停到容器元素上，則可以執行此操作。

.box-wrapper:hover .ghost-box { 
    opacity: 1 
} 
.box-wrapper:hover .title { 
    opacity: 0 
}

或者您可以使用CSS通用兄弟選擇器。 https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

來源

2016-03-17 17:45:31 CKH4

使用包裝來檢查'：hover'肯定是更好的方法。 –

@chinoto我之所以添加兩者的原因是，包裝可能包含其他HTML或幽靈盒可能不會完全填充包裝。 – CKH4

是的，這正是爲什麼它是更好的方式去:) –

選項1：設置.box-wrapper.
選擇2背景圖片：設置不透明度的.content-box內容使用.content-box>*
選項2：與其他的div包裹的.content-box內容（.content-box-fader？）您應用淡化效果。

來源

2016-03-17 17:47:40

懸停並更改div和元素的不透明度

回答

相關問題