如何在完整 div 而不是 SVG 路径上添加悬停

Question

我试图创建一个带有问号的圆圈。现在，如果您注意到悬停效果仅在圆圈和问号上，而不是完整的div上。我尝试在父div 上使用该类，但由于 SVG，我认为它不起作用。

如何将鼠标放在链接上的任何位置来带来悬停效果？

请问有人可以帮我吗？

问候法案

.popover-holder {
  margin: 4px 0px 0px 5px;
  float: left;
}
.popover-holder .popover {
  border: 0px;
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.popover-body {
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
  padding: 18px;
  border-color: transparent;
}
.popover-questionmark {
  float: left;
  margin: -2px 0px 0px 4px;
}
.popover-circle {
  fill: none; 
  stroke: #484848;
  stroke-width: 22;
}
.popover-circle:hover {
  stroke: #02b875;
}
.popover-question {
  fill: #484848;
}
.popover-question:hover {
  fill: #02b875;
}

                              <div class="popover-holder">
                                 <a tabindex="0" class="popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="Service fee helps Driveoo run the platform and provide dedicated customer support">
                                    <span class="popover-qm">
                                       <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450" width="24" height="24">
                                          <circle class="popover-circle" cx="217.2" cy="199.2" r="165.7"/>
                                          <g>
                                             <path class="popover-question" d="M222.5,238.6H205c0.1-12.7,0.3-20.6,0.5-23.7c0.3-3.1,1.2-6.3,2.6-9.4c1.5-3.1,3.1-5.6,4.9-7.3c1.8-1.7,6.2-4.5,13-8.4c7.4-4.2,12.5-7.4,15.3-9.7c2.8-2.3,5.2-5.5,7.3-9.6c2.1-4.1,3.1-8.6,3.1-13.5c0-9.3-3.4-16.6-10.1-21.9c-6.7-5.3-14.6-7.9-23.7-7.9c-20.7,0-33.3,12-37.8,36l-18.2-3.9c6.1-32.8,25.1-49.2,57-49.2c16.3,0,29.4,4.5,39.4,13.4s15,20.3,15,34.2c0,18.1-10.4,32.6-31.3,43.5c-9.1,4.8-14.7,8.6-16.7,11.3c-2,2.7-3.1,7-3.1,12.8L222.5,238.6z M226.7,256.1v24H202v-24H226.7z"/>
                                          </g>
                                       </svg>
                                    </span>
                                 </a>
                              </div>

Answer 1

您遇到的问题很可能是您正在寻找支架上的悬停，但没有更换子级。这是您所期望的吗？

.popover-holder {
  margin: 4px 0px 0px 5px;
  float: left;
}
.popover-holder .popover {
  border: 0px;
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.popover-body {
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
  padding: 18px;
  border-color: transparent;
}
.popover-questionmark {
  float: left;
  margin: -2px 0px 0px 4px;
}
.popover-circle {
  fill: none; 
  stroke: #484848;
  stroke-width: 22;
}
.popover-holder:hover .popover-circle,
.popover-circle:hover {
  stroke: #02b875;
}
.popover-question {
  fill: #484848;
}
.popover-holder:hover .popover-question,
.popover-question:hover {
  fill: #02b875;
}

<div class="popover-holder">
                                 <a tabindex="0" class="popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="Service fee helps Driveoo run the platform and provide dedicated customer support">
                                    <span class="popover-qm">
                                       <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450" width="24" height="24">
                                          <circle class="popover-circle" cx="217.2" cy="199.2" r="165.7"/>
                                          <g>
                                             <path class="popover-question" d="M222.5,238.6H205c0.1-12.7,0.3-20.6,0.5-23.7c0.3-3.1,1.2-6.3,2.6-9.4c1.5-3.1,3.1-5.6,4.9-7.3c1.8-1.7,6.2-4.5,13-8.4c7.4-4.2,12.5-7.4,15.3-9.7c2.8-2.3,5.2-5.5,7.3-9.6c2.1-4.1,3.1-8.6,3.1-13.5c0-9.3-3.4-16.6-10.1-21.9c-6.7-5.3-14.6-7.9-23.7-7.9c-20.7,0-33.3,12-37.8,36l-18.2-3.9c6.1-32.8,25.1-49.2,57-49.2c16.3,0,29.4,4.5,39.4,13.4s15,20.3,15,34.2c0,18.1-10.4,32.6-31.3,43.5c-9.1,4.8-14.7,8.6-16.7,11.3c-2,2.7-3.1,7-3.1,12.8L222.5,238.6z M226.7,256.1v24H202v-24H226.7z"/>
                                          </g>
                                       </svg>
                                    </span>
                                 </a>
                              </div>