如何在完整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>