时间戳

首页 > 解决方案 > 鼠标悬停按钮并同时触发 svg 圆

html - 鼠标悬停按钮并同时触发 svg 圆

问题描述

JSFIDDLE

我试图在悬停按钮时触发鼠标悬停更改以填充 svg 圆形背景颜色。我无法做到这一点。

.position-orange-circle { position: absolute; margin-top: 100px; }
.position-btn { background-color: #ffbb11; height: 41px; width: 130px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}
.position-btn:hover svg circle { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; fill: #ffbb11;}
<svg height="150" width="150" class="position-orange-circle">
	<circle cx="60" cy="60" r="50" stroke="#ffbb11" stroke-width="5" fill="white"/>
</svg> 
 					
<div class="btn-position">
	<button class="position-btn">Apply now</button>
</div>

标签： htmlcssmouseover

解决方案

您不能使用 CSS 向上导航 DOM。您只能访问未来的兄弟姐妹和孩子。

文档：https ://www.w3schools.com/css/css_combinators.asp

.position-orange-circle { position: absolute; margin-top: 100px; left: 15px; }
.position-btn { background-color: #ffbb11; height: 41px; width: 130px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}
.position-btn:hover ~ .position-orange-circle > circle{ background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; fill: #ffbb11;}
<div class="btn-position">
<button class="position-btn">Apply now</button>
<svg height="150" width="150" class="position-orange-circle">
<circle cx="60" cy="60" r="50" stroke="#ffbb11" stroke-width="5" fill="white"/>
</svg> 
</div>

推荐阅读