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的元素的悬停改变颜色箱内

回答

相关问题