CSS的元素的懸停改變顏色箱內

<!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>

上面的代碼提供了以下輸出

，但我想下面就.box類的懸停輸出

我可以做.test-title:hover { colour:red; }和SVG圖像，我可以用.icon:hover { fill:red }顏色改變字體的顏色，但我想改變這兩個形象，對.box懸停文字的顏色，

來源

2017-04-23 Harish

剛剛嘗試用孩子CSS選擇器（ >）要做到這一點：

<!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>

注：退房洛杉磯示例中的st CSS規則以瞭解其工作原理。

希望這會有所幫助！

來源

2017-04-23 15:43:47

謝謝@HudsonTaylor，它正在按照我的需要工作，但你忘了加'fill：red' – Harish

哎呀，剛纔注意到了！抱歉。你介意將答案標記爲正確嗎？我修正了錯誤:) –

讓我等5分鐘 – Harish

CSS的元素的懸停改變顏色箱內

回答

相關問題