Weird hover zone in css popup -


i've created little popup menu page i'm working on, using css. basically, i've got this

.debug-menu {     position: absolute; z-index:101;     width: 50px; height: 20px; padding: 15px; top: 30px; right: 30px;     background: #f00505; color: white; } .debug-menu:hover {     width: 150px; height: 180px; } 

and stuff content:

.debug-menu .label {     position: relative; padding-right: 20px;     visibility: hidden; } .debug-menu:hover .label {     visibility: visible; } 

here's fiddle. works more or less intended, expanding , showing content when hovered. if approach mouse left, hover event happens correctly, right when cross div. weird (maybe i'm not using css right, though) thing is, if approach below, :hover happens way soon, i.e. when mouse below edge of div. also, flickers mouse moved around.

replace following css instructions way :

.debug-menu h3 {     text-align: center;     text-decoration: underline;     display:none; }  .debug-menu hr {     visibility: hidden; }  .debug-menu:hover h3 {    display:block; } 

(h3 overflows outside parent , cause :hover activated)


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -