Search code examples
htmlcsstriggersmouseout

Children inside <a href> trigger mouseout. How to prevent that?


I have this:

<a href="javascript:void(0);">
   <div>
      <span>some content</span>
      <span>some content</span>
   </div>
</a>

The problem is hovering the mouse over from one <span> to another triggers an instant mouseout and mouseover again even though they have no padding or margin between them. Even on the browser's status bar the link flickers for an instant. How can this be prevented?


Solution

  • Hacked my way to a solution. position:relative the anchor and a dummy div inside that expands at width and height 100% absolutely positioned to overlay the anchor exactly. No longer flickers the link on hovering and shouldn't be any dummy mouseout events firing. Here is the code and here is a link :

    <html><head><style>
    a {
    float:left;
    border:1px solid #b0b;
    display:block;
    position:relative;
    }
    .shpf,.shpe {
    background:#b0b; float:left;
    width:2px; height:2px;
    padding:0; margin:0;
    line-height:0;
    }
    .shpe {
    background:#fff;
    }
    .shpbrk {
    float:left; clear:both;
    }
    .dummy {
    z-index:1;
    position:absolute;
    left:-1px; top:-1px; /* Fix for parent's border, isn't required for no border */
    border:1px solid;
    border-color:inherit;
    background:transparent;
    width:100%;
    height:100%;
    }
    </style></head><body>
    <a id="happy" href="javascript:void(0);"><div class="dummy"></div><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
    </body></html>