Как добавить наведение на полный div вместо SVG path? - PullRequest
Новая
       65

Как добавить наведение на полный div вместо SVG path?

2 голосов
/ 01 апреля 2019

Я пытался создать круг с вопросительным знаком. Теперь, если вы заметили, что эффект наведения находится только на круге и только на вопросительном знаке, но не на полном делении. Я пытался использовать класс в родительском 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>

1 Ответ

2 голосов
/ 01 апреля 2019

Скорее всего, проблема, с которой вы сталкиваетесь, заключается в том, что вы ищете парение на держателе, но не меняете детей. Это то, что вы ожидаете? 

.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>
...