我正在尝试触发鼠标悬停更改以在悬停按钮时填充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>
您无法使用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>
这是一个仅限CSS的解决方案。由于SVG嵌套在BUTTON中,因此结构非常传统。它符合您的描述,但可能适用于您的用例,也可能不适合您的用例:
<style>
svg {
position: absolute;
stroke: #ffbb11;
fill: none;
pointer-events: none;
}
button:hover svg {
fill: #ffbb11;
}
</style>
<button>
Hover
<svg width="200" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40"/>
</svg>
</button>
这可能对你有所帮助!
function chbg(color) {
document.getElementById("whiteCircle").setAttribute("fill", color);
}
.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 id="whiteCircle" cx="60" cy="60" r="50" stroke="#ffbb11" stroke-width="5" fill="white"/>
</svg>
<div class="btn-position">
<button class="position-btn" onmouseover="chbg('red')" onmouseout="chbg('white')">Apply now</button>
</div>
根据@ obsidian的答案,它会是这样的:
function chbg(color) {
document.getElementById(id).style.backgroundColor = color;
document.getElementById(id).style.backgroundColor.setAttribute("fill", "red")
}
如果它更多chbg(color, id, td, fc)
function chbg(color, id, td, fc) {
document.getElementById(id).style.backgroundColor = color;
document.getElementById(id).style.textDecoration = td;
document.getElementById(id).style.color = fc;
}