鼠标悬停按钮并同时触发 svg 圆答案

【问题标题】：Mouseover button and triggers svg circle same time鼠标悬停按钮并同时触发 svg 圆
【发布时间】：2018-09-11 20:54:01
【问题描述】：

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>

【问题讨论】：

什么都没有发生，因为你没有 chbg JavaScript 函数，因此 chbg('red') 只会抛出 Uncaught ReferenceError: chbg is not defined。
@ObsidianAge - 除非必须，否则我不想使用 JS？
对不起，我在 stackoverflow 上发帖之前正在测试 JS。那对我不起作用。

标签： html css mouseover

【解决方案1】：

您不能使用 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>

【讨论】：

这正是我想要的——没有 JS！谢谢！
很高兴能帮上忙！

【解决方案2】：

这是一个纯 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>

见https://codepen.io/MSCAU/pen/zJWaEa

【讨论】：

【解决方案3】：

这可能对你有帮助！

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>

https://jsfiddle.net/mzb12pqs/

【讨论】：

【解决方案4】：

根据@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;
}

Test

【讨论】：

我在 SOF 上发布问题之前尝试过。它没有填充 jsfiddle 上 svg 圆圈内的背景 - fill:#ffbb11;