Getting a pop-up to work with a SVG

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>

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;
    -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?

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}

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.