CSS auf schweben Farben ändern von Elementen innerhalb des Kastens

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<style> 
 

 
    .box { 
 
\t  height: 200px; 
 
\t  width: 200px; 
 
\t  border: 1px solid #eee; 
 
    } 
 
    
 
    .icon { 
 
\t \t position: absolute; 
 
\t \t width: 100px; 
 
\t \t height: 100px; 
 
\t \t left: 50px; 
 
\t \t top: 80px; 
 
     \t fill: black; 
 
    } 
 
    
 
    .test-title { 
 
\t  text-align: center; 
 
\t  font-size: 22px; 
 
    } 
 
    
 
    .box:hover { 
 
\t  
 
    } 
 
     
 
</style> 
 
</head> 
 

 
<body> 
 
\t <div class="box"> 
 
\t \t <p class="test-title">Undo Icon</p> 
 
\t \t <svg viewBox="0 0 32 32" preserveAspectRatio="xMidYMin slice" class="icon"> 
 
\t \t \t <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="test.svg#icon-undo"></use> 
 
\t \t </svg> 
 
\t </div> 
 
</body> 
 

 
</html>

oben Code gibt folgende Ausgabe

aber ich möchte folgende Ausgabe auf schweben von .box Klasse

Ich kann .test-title:hover { colour:red; } und für svg Bild, indem Sie Farbe der Schrift ändern I unter Verwendung .icon:hover { fill:red } färben können, aber ich mag sowohl Farbe von Bild und Text auf .box von Hover ändern,

Quelle

2017-04-23 Harish

versuchen Sie einfach das Kind CSS-Selektor (>), dies zu tun:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<style> 
 

 
    .box { 
 
\t  height: 200px; 
 
\t  width: 200px; 
 
\t  border: 1px solid #eee; 
 
    } 
 
    
 
    .icon { 
 
\t \t position: absolute; 
 
\t \t width: 100px; 
 
\t \t height: 100px; 
 
\t \t left: 50px; 
 
\t \t top: 80px; 
 
     \t fill: black; 
 
    } 
 
    
 
    .test-title { 
 
\t  text-align: center; 
 
\t  font-size: 22px; 
 
    } 
 
    
 
    .box:hover, .box:hover > .icon { 
 
\t  color: red; 
 
     fill: red; 
 
    } 
 
     
 
</style> 
 
</head> 
 

 
<body> 
 
\t <div class="box"> 
 
\t \t <p class="test-title">Undo Icon</p> 
 
\t \t <svg viewBox="0 0 32 32" preserveAspectRatio="xMidYMin slice" class="icon"> 
 
\t \t \t <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://139.59.35.115/test.svg#icon-undo"></use> 
 
\t \t </svg> 
 
\t </div> 
 
</body> 
 

 
</html>

Hinweis: Schauen Sie sich die la Im Beispiel sehen Sie die CSS-Regel, um zu sehen, wie das funktioniert.

Hoffe, das hilft!

Quelle

2017-04-23 15:43:47

danke @HudsonTaylor, es funktioniert so, wie ich brauchte, aber Sie haben vergessen add 'fill: red' – Harish

Whoops, gerade bemerkt, dass! Es tut uns leid. Würde es Ihnen etwas ausmachen, die Antwort als richtig zu markieren? Ich habe den Fehler behoben :) –

fragt mich, 5 Minuten zu warten – Harish

CSS auf schweben Farben ändern von Elementen innerhalb des Kastens

Antwort

Verwandte Themen