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

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

div:hover .popover-circle { fill: #02b875; }?

— 01.04.2019 20:47

css svg shtml

01.04.2019 20:43

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

220

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

01.04.2019 20:47

Другие вопросы по теме

Ошибка загрузки значка из реестра значков материалов с «тег <svg> не найден»

Как раскрасить две стороны треугольника?

Переполнение SVG в Edge не видно

Преобразование clipPath в :focus/:hover для нескольких экземпляров одного и того же значка

D3.js перемещает элемент при масштабировании

Как заставить карту SVG реагировать на ширину родительского элемента

Как перемещаться по изображению SVG с помощью клавиатуры

Используйте svg с внешним шрифтом в GIMP

Объект SVG - как правильно масштабировать и перетаскивать его?

Как исправить «Фильтр SVG не работает в IE, но работает в Chrome и Firefox»

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

Ответы 1

Другие вопросы по теме

Похожие вопросы