I've tried to create a circle with a question mark in it. Now if you notice the hover effect is only on the circle and the question mark only but not the complete div. I tried to use the class on the parent div but because of SVG I think it doesn't work.
How do I bring hover effect just by bringing the mouse anywhere on the link?
Can someone help me, please?
Regards, Bill
.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>Most likely the problem that you are experiencing is you are looking for the hover on the holder but not changing the children. Is this what you are looking to expect?
.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>