Display Text Over SVG Element On Hover

Something like this? You can use g to group elements.

svg text {display: none;}
svg g:hover text {display: block;}

<svg width="511" height="15">
    <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
    <g>
      <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
      <text x="0" y="15">Label 1</text>
    </g>
</svg>

Try this, I think is more convenient way to do it:

nav {
    position: absolute;
    top:-11px;
}

ul {
    position: relative;
}
nav li {
    display:inline;
}
nav a {
    display:inline-block;
    visibility: hidden;
    padding-right:5px;
    text-decoration:none;
    color: white;
}
ul li:hover a {
    visibility:visible;
}

<svg width="511" height="15">
  <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>
  <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>
</svg>
<nav>
  <ul>
   <li><a href="#">text_one</a></li>
   <li><a href="#">text_two</a></li>
   <li><a href="#">text_three</a></li>
  </ul>
</nav>

Tags:

Javascript

Html

Css

Svg

Related