Hover State не работает на чужой объект - PullRequest
Новая
       12

Hover State не работает на чужой объект

0 голосов
/ 06 сентября 2018

У меня есть div внутри тега foreignObject, который я хочу изменить при наведении на него цвета, совпадающего с цветом заливки для шестиугольника. Hover отлично работает для шестиугольника, но при наведении курсора на div ничего не происходит. Есть идеи? 

.hex {
    stroke: red;
    stroke-width: 1px;
    fill: transparent;
}

.hex:hover {
    fill: blue;
}
#div1 {
    border: 1px solid green;
    text-align: center;
}
#div1:hover {
  fill: blue;
}

    <svg id="viewBox" viewBox="0 0 3000 1000"  width="3000" height="1000">
      <g>
      <use class="hex" xlink:href="#hexshape"/>
        <foreignObject id="h0" x="0" y="120" width="300">
          <div id="div1">div inside SVG.</div>
        </foreignObject>>

      </g>
      <defs>
        <polygon id="hexshape" width="300" height="260" points="300,130 225,260 75,260 0,130 75,0 225,0"></polygon>
      </defs>
    </svg>

jsfiddle: http://jsfiddle.net/0asLzwjv/28/

1 Ответ

0 голосов
/ 07 сентября 2018

Ваш код выглядит хорошо, за исключением двух вещей:

  1. foreignObject не было предоставлено height. Так вот причина того, что div не отображается в вашем коде.

  2. div занимает background-colour, а не fill.

Я обновил ваш код с учетом вышеуказанных изменений. 

.hex {
  stroke: red;
  stroke-width: 1px;
  fill: transparent;
}

.hex:hover {
  fill: yellow;
}

#div1 {
  border: 1px solid green;
  text-align: center;
}

#div1:hover {
  background-color: #999;
}
<svg id="viewBox" viewBox="0 0 3000 1000" width="3000" height="1000">
      <g>
      <use class="hex" xlink:href="#hexshape"/>
        <foreignObject id="h0" x="0" y="120" width="300" height="300">
          <div id="div1">div inside SVG.</div>
        </foreignObject>>

      </g>
      <defs>
        <polygon id="hexshape" width="300" height="260" points="300,130 225,260 75,260 0,130 75,0 225,0"></polygon>
      </defs>
    </svg>
...