Getting a pop-up to work with a SVG

[lurtnowski]

I have a SVG an d used the foreignobject tag to input some HTML

<foreignobject class="node " x="137" y="425" width="120" height="100">
                 <div class="list-group stuff">
				  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary"><img src="images/menu_magicdraw_icon.png">&nbsp;&nbsp;MBSE Export</a>
				  <a href="fid_zoom_7.html" class="list-group-item list-group-item-action list-group-item-secondary"><span class="icon-eye-open"></span>&nbsp;&nbsp;View FID</a>
				  <a href="pdf/piers.pdf" class="list-group-item list-group-item-action list-group-item-secondary"><span class="icon-download-alt"></span>&nbsp;&nbsp;Download</a>
				</div>               
            </foreignobject>

heres the output

I’m trying to make the menu pop up hen the mouse moves over the link, heres my css

.stuff {
    opacity: 0.0;
	position:relative;
	top:-25px;
	left:30px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.hover {


}
.hover:hover + .stuff {
    opacity: 1.0;
}

and set up the link like

<a href="fid_zoom_7.html" class="hover">

but it doesn’t seem to work, an thoughts?

[PaulOB]

@lurtnowski

.hover:hover + .stuff { opacity: 1.0; }

I don’t know anything about SVG but I can tell you that .stuff is not a sibling of .hover. It would be something like this:

.hover:hover + foreignObject .stuff{opacity:1.0}