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

imvain2

您遇到的最可能的问题是您正在寻找支架上的悬停部件,而不是更换孩子。这是您期望的吗?

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Vanilla JS悬停在SVG路径上以显示DIV?

如何在鼠标悬停到页面上的所有div上添加悬停效果?

如何在悬停时正确定位SVG符号路径?

如何在SVG路径文件中更改悬停背景

如何在悬停时更改 svg 路径宽度

如何在div上创建悬停动画

如何在div上添加图像而不丢失CSS悬停效果中的先前内容

如何在同一 div 的不同元素上添加悬停效果

悬停div svg路径颜色更改

如何在悬停时向上扩展div,而不是向外扩展

如何使SVG路径悬停区域更大

如何在课程上添加多个悬停

如何在悬停时在图像上添加转换时间?

图像悬停时如何在图像上添加文字?

如何在下拉菜单上添加悬停效果?

如何在悬停父对象上打开子div?

svg如何在svg符号上添加边框?

如何在svg路径上制作脉冲动画?

如何在SVG路径元素上设置亮度

如何在鼠标悬停时停止 Highmaps 以更改 SVG 路径顺序

如何在另一个div的顶部添加文本div,同时保持将鼠标悬停在其下方的div上的能力?

“如何在 <tr> 上添加”鼠标悬停和鼠标悬停?

如何在不指定完整路径的情况下添加或提交特定文件?

如何在Android上的路径中添加android工具?

如何在圆圈上悬停

iTerm 如何在拆分窗格的标题栏上显示完整路径

如何在Mac上从显示名称中找到字体的完整路径?

在emacs中,使用neotree,如何在指向终止环的节点上提取节点的完整路径?

如何在PATH上可靠地找到程序的完整路径?