当鼠标悬停在链接上时，改变单独SVG多边形的填充颜色。

Question

当鼠标悬停在链接上时，改变单独SVG多边形的填充颜色。

csssvg

3

我在左侧列中有一列房间列表，在右侧列中有一个SVG楼层平面图。我有两个问题：

第一个问题是，是否有一种纯CSS的方法可以在鼠标滑过左列链接时，改变楼层平面图中房间的颜色？

如果答案是否定的，我该怎么办？我猜大概需要使用一些JavaScript代码，但不知道从哪里开始或要搜索什么。

以下是迄今为止的工作示例：

div#list {float:left; width:50%}
div#list ul li a {color:#333}
div#list ul li a:hover {color:#ED5D45}
div#map {float:right; width:50%}
div#map svg#plan polygon.building {fill:#CCC}
div#map svg#plan a polygon.studio-j {fill:#333}
div#map svg#plan a:hover polygon.studio-j {fill:#ED5D45}

<div id="list">
  <ul>
    <li class="j"><a href="/studios/j/">Studio J</a></li>
  </ul>
</div>
<div id="map">
<svg id="plan" x="0" y="0" viewBox="0 0 412 408" enable-background="new 0 0 412 408" xml:space="preserve">  
  <polygon class="building" points="0,68.1 377.2,0 411,407.3 20,405.7 "/>
  <a xlink:href="/studios/j/" xlink:title="Studio J">
    <polygon class="studio-j" points="214,126 261,126 261,131 388,131 377.2,0.4 213.5,30.2 "/>
  </a>
</svg>
</div>

在这里查看代码示例：https://jsfiddle.net/morgyface/7utpx1n6/

- morgyface

由于对其他人来说，广泛的帮助甚至是正确方向的提示显然是“离题”的，因此我最终使用CSS、jquery以及.hover和.toggleClass解决了这个问题。 - morgyface

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

这在CSS中不可能实现，因为链接与SVG无关。需要使用JS来简化此问题。

或者，只需将链接放在#map div内（不需要列表结构），并相应地调整CSS。

a:hover {
  color: red
}
div#map {
  float: right;
  width: 50%
}
div#map svg#plan polygon.building {
  fill: #CCC
}
svg#plan a polygon.studio-j {
  fill: #333
}
svg#plan a:hover polygon.studio-j {
  fill: #ED5D45
}
.j:hover + svg#plan a polygon.studio-j {
  fill: green;
}

<div id="map">
  <a class="j" href="/studios/j/">Studio J</a>

  <svg id="plan" x="0" y="0" viewBox="0 0 412 408" enable-background="new 0 0 412 408" xml:space="preserve">
    <polygon class="building" points="0,68.1 377.2,0 411,407.3 20,405.7 " />
    <a xlink:href="/studios/j/" xlink:title="Studio J">
      <polygon class="studio-j" points="214,126 261,126 261,131 388,131 377.2,0.4 213.5,30.2 " />
    </a>

  </svg>
</div>