html - 从 SVG : using hover to reveal the menu 创建下拉列表的故障排除

Question

尝试在 CSS 中使用 .class:hover > .otherClass 属性将 otherClass 的不透明度从 0 更改为 1。

在这个例子中，.class 是我粗略编辑的自行车 SVG(svg 路径代码是一个 speghetti 怪物，我很抱歉 - 不抱歉，因为它有效)。 .otherClass 是一个链接到 div 的属性，用于显示 ul 中的三个下一个 li。 (真的不在乎他们现在怎么看，只想在 css 中正确定位组)。

我的想法是，当我将鼠标悬停在自行车 SVG 上时，将显示下拉菜单——很粗暴。代码如下:

在过去的两个小时里，我尝试了不同的方法来定位嵌套的 .otherClass，但都无济于事。

HTML:

<div ="nav">

<svg class = "bike" viewBox="0 0 625 355" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
        style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
        <g id="Bike"><path d="M108.706,153.568c51.739,0.588 93.266,43.071 92.678,94.81c-0.589,51.739 -43.072,93.266 -94.811,92.677c-51.738,-0.588 -93.266,-43.071 -92.677,-94.81c0.588,-51.739 43.071,-93.266 94.81,-92.677Z"
        style="fill:none;stroke:#000;stroke-width:12.5px;"/><path d="M107.758,236.896c5.749,0.065 10.363,4.785 10.298,10.534c-0.066,5.749 -4.786,10.363 -10.535,10.298c-5.748,-0.066 -10.363,-4.786 -10.297,-10.535c0.065,-5.749 4.785,-10.363 10.534,-10.297Z"/>
        <path d="M517.132,147.796c51.738,0.589 93.266,43.072 92.677,94.81c-0.588,51.739 -43.072,93.267 -94.81,92.678c-51.739,-0.588 -93.266,-43.072 -92.678,-94.81c0.589,-51.739 43.072,-93.266 94.811,-92.678Z"
        style="fill:none;stroke:#000;stroke-width:12.5px;"/><path d="M516.184,231.124c5.748,0.066 10.363,4.786 10.297,10.535c-0.065,5.748 -4.786,10.363 -10.534,10.297c-5.749,-0.065 -10.363,-4.786 -10.298,-10.534c0.066,-5.749 4.786,-10.363 10.535,-10.298Z"/>
        <path d="this path is absolutely massive, not including it"/>
  </g>

  <div class="drop">
  <ul>
    <li>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
  </ul>
  </div>

</svg>

</div>

CSS:

.bike {
  top: 5%;
  left: 5%;
  z-index: 5;
  float: center;
  width: 15%;
  position: absolute;
}

.bike:hover, .bike:hover > .drop {
  fill: blue;
  opacity:1;
}


.drop {
  opacity:0;
}

ul{
  color: green;
  width: 100px;
  height: 100px;
}

li{
  color: blue;
  width: 100px;
  height: 50px;
}

当您将鼠标悬停在 SVG 上时，下拉菜单意味着应将其不透明度从 0 更改为 1。

Answer 1

部分问题是您的 SVG 格式不正确。如果不将 SVG 标记为外部对象，则不能在 SVG 中包含 HTML 代码...这是因为 SVG 与 HTML 一样是一个 XML 命名空间。 (命名的 XML 节点以特定方式解释)。

这是 documentation对于 SVG foreignObject。

但是，我可以通过简单地将您的 .drop div 移动到 SVG 标签之外来避免这种情况。然后使用“下一个兄弟”选择器而不是“直接子级”。

.bike:hover {
  fill: blue;
}
.bike:hover + .drop {
  background-color: blue;
  opacity:1;
}

此外，fill:color 在 HTML 实体上无效，请改用 background-color。这可能会导致您的浏览器在出错后忽略 CSS。