Hover effect seems to flutter

I created a simple hover effect, when the mouse hovers over a link, a menu is supposed to appear using CSS

foreignObject {
    display:none;
	position:relative;
	top:-25px;
	left:30px;
}
.hover:hover + foreignObject  {
    display: block;
}

then the hover woks, but the menu seems to be shakey and sort of flutter.
If I use the web developertoolbar, and foce a hover over the link, everything is perfect


Heres the code

		<a href="fid_zoom_7.html" class="hover">
		<g id="shape1-7" v:mID="1" v:groupContext="shape" v:layerMember="0" transform="translate(81,-156.938)">
			<g id="shadow1-8" v:groupContext="shadow" v:shadowOffsetX="1.44" v:shadowOffsetY="-1.44" v:shadowType="1"
					transform="matrix(1,0,0,1,1.44,1.44)" class="st1">
				<rect x="0" y="573.75" width="72" height="54" class="st4"/>
			</g>
			<rect x="0" y="573.75" width="72" height="54" class="st5"/>
			<text x="20.99" y="603.75" class="st6" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>PIERS</text>
		</g>
		</a>
            <foreignobject class="node " x="137" y="425" width="120" height="100">
                 <div class="list-group stuff">
				  <a href="piers.html" 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>

Why the difference?

My guess is that once the foreignObject appears you are no longer hovering over .hover but it’s sibling foreignObject.
That makes the foreignObject disappear, making the hover happen again, as a result foreignObject reappears, etc, etc…
You have a flicker.

1 Like

Try this:

foreignObject {
    display:none;
	position:relative;
	top:-25px;
	left:30px;
}
.hover:hover + foreignObject  {
    display: block;
}
foreignObject:hover{display:block}
1 Like

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