悬停时的CSS会更改框内元素的颜色

时间：2017-04-23 15:37:42

标签： html css svg

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

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

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

</html>
＆＃13;
＆＃13;
＆＃13;

上面的代码给出了以下输出

plain output

但是我希望在.box类

的悬停时跟随输出

enter image description here

我可以通过.test-title:hover { colour:red; }改变字体的颜色，对于svg图像，我可以使用.icon:hover { fill:red }进行颜色处理，但我希望在.box的鼠标悬停时更改图像和文字的颜色，

1 个答案:

答案 0 :(得分：2)

尝试使用子CSS选择器（>）来执行此操作：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>

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

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

</html>
＆＃13;
＆＃13;
＆＃13;

注意：查看示例中的最后一条CSS规则，了解其工作原理。

希望这有帮助！

相关问题
最新问题