2017-01-28 15 views
0

Wie verbinde ich nur das div, nicht den Text innerhalb des div?Wie verblasse ich nur das div, nicht den Text?

Hier ist mein Code: https://jsfiddle.net/tc6fq235/3/

<div class="fade">Hover over me.</div> 

.fade { 
    background-color: antiquewhite; 
    width: 300px; 
    height: 200px; 
    text-align: center; 

    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

.fade:hover { 
    opacity: 0.5; 
} 

Antwort

3

Durch die div Verblassen Sie den Text in der es verblassen, weil der Text Teil des div ist. Wenn Sie nur die Hintergrundfarbe ausblenden möchten (der einzige andere sichtbare Teil des Div, außer dem Text), können Sie die Alpha-Transparenz verwenden.

.fade { 
 
    background-color: antiquewhite; 
 
    width: 300px; 
 
    height: 200px; 
 
    text-align: center; 
 
    transition: background-color .25s ease-in-out; 
 
} 
 

 
.fade:hover { 
 
    background-color: rgba(250,235,215,0.5); 
 
}
<div class="fade">Hover over me.</div>

+0

Danke, funktioniert super. Wäre dies der beste Weg zu gehen statt jQuery zu verwenden? – John

+1

Np! Fragen Sie, ob Sie '' hover' 'in CSS über jquery '$ .hover()' verwenden sollten? Wenn ja, ist CSS fast immer eine schnellere, einfachere Option. –

+0

Ja, danke. :) – John

Verwandte Themen