发表新帖
发表新帖

Display Text Over SVG Element On Hover

前端 未结
关注
4 428
陌清茗
陌清茗 2020-12-17 22:22

So I have a simple SVG element (copied below), and I want to display text (currently within the data-label attribute) when the rectangle with the bar

相关标签:
4条回答
  • 别那么骄傲
    2020-12-17 23:01 

    div>svg:hover {
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.589);
  transform: scale(1.2);
  transition: all 0.2s ease-in-out;
}

div>svg {
  margin: 10px 14px;
  padding: 8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
    <html>
<script src="//at.alicdn.com/t/font_1652933_iyos793o7jk.js"></script>

<body>
  <div title="
    0 讨论(0)
  • 无人共我
    2020-12-17 23:05

    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>

    0 讨论(0)
  • 猫巷女王i
    2020-12-17 23:06

    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>

    0 讨论(0)
  • 日久生厌
    2020-12-17 23:06

    Another way to solve your problem:

    	rect:hover + text{
		display :block
	}
    <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>
	<text style="display:none" x="0" y="15">Label 1</text>
</svg>

    0 讨论(0)
 看不清?
提交回复
热议问题