CODEWITHSUNDEEP
csssvghover
denissemiranda
denissemiranda

Reputation: 31

Show hidden rect with text on hover of another poly

I need to use pure svg for a project. I know how to get this effect simply with divs but I dont know how to make it work with svg, I dont know what im doing wrong.

I want to show a hidden black rect with white text when you hover on another polygon (and the polygon is 0.1 of opacity normal and changes to 0.8 of opacity on the same hover) Something like a tooltip with opacity and with a nice smooth transition, but pure SVG.

.showme {
    opacity: 0.3;
}

.showme:hover {
    opacity: 0.8;    
}

.desc {
    visibility: hidden;
}

.showme:hover + .desc {
   visibility: visible;
}
<svg width="200" height="200" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <rect x="1" y="1" width="998" height="298" fill="blue" class="showme"/>    
</svg>

<svg width="200" height="200" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1" class="desc" >
  <rect x="1" y="1" width="998" height="298" fill="black" />     
 <text x="250" y="150" font-family="Verdana" font-size="55" fill="white">Hello world!</text>
</svg>

Please help :/

Thanks.

Upvotes: 0

Views: 853

Answers (1)

Julien Gr&#233;goire
Julien Gr&#233;goire

Reputation: 17134

Keeping your svg, you can do with like this, but you'll need some slight changes:

<svg  width="200" height="200" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <rect onmouseover='document.getElementById("desc").style.visibility = "visible"' onmouseout='document.getElementById("desc").style.visibility = "hidden"' x="1" y="1" width="998" height="298" fill="blue" class="showme"/>    
</svg>

<svg width="200" height="200" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1" id="desc" >
  <rect x="1" y="1" width="998" height="298" fill="black" />     
 <text x="250" y="150" font-family="Verdana" font-size="55" fill="white">Hello world!</text>
</svg>

https://jsfiddle.net/q6kkhvz7/2/

Upvotes: 1

Related Questions