Stop hover when anchor is shown

Question

I want to show anchor on just above table, display on hover of the thead, and again hide on mouseout from thead. I have did with this with mouseover and mouseout events but the problem is that when I am trying to take mouse over the anchor it blinks because the mouseout event is still being fired. I want to show the anchor and trying to able click the anchor when it is shown.

This is my sample code:

<a href="#" class="anchor" style="display:none">test</a>
<table>
    <thead>
         <tr>
            <th></th>
         </tr>
  </thead>
  <!-- other code --> 
</table>

Answer 1

Thanks very much all guys. All of you tried to help me. I really appreciate. I solved this issue. i Did something like this:-

When the hover was out of the thead the anchor was blinking as the mouseout event was firing and trying to hide anchor. So I called mouseover on anchor also to show anchor.

$('thead', 'a').mouseover(function () {
                $('a').show();
            });
            $('thead', 'a').mouseout(function () {
                $('a').hide();
            });

Answer 2

This is an interesting question because I've had problems like this in the past.

In this FIDDLE, I have two elements the upper one is a styled anchor, and the lower one a div like your table.

The mouseover and mouseout events use both elements.

I wonder if this might work for you.

JS

$('.table1, .showme').mouseover( function(){
       $('.showme').css('display', 'block');
});
$('.table1, .showme').mouseout( function(){
       $('.showme').css('display', 'none');
});

---

Here's a second fiddle with a large table and the actions only active over the header.

Answer 3

Here is the fiddle: http://jsfiddle.net/ctwheels/xp9zjcr1/

You can remove the border on the .hoverableDiv class, I added it to show you the selection area.

What I've done is I've wrapped your links (<a>) in a div with the class .hoverableDiv, which is set as position:fixed;. In JS I count the number of items in the .th class and I get the location and sizes of the .th class items (I've added class="th" to your <th> tags (add it only if you want a link for it, you can leave the class out and it will not have a hover effect with link). From here, I take each item in the .hoverableDiv class and set its location and size within the document to match that of the item with .th class that matches its index. Then I set the properties for the mouseover and the properties for mouseout.

The effect is: the link hides on document ready is shown on mouseover and hides again on mouseout. The div surrounding the link expands and retracts to the correct position during these events

HTML

<div class="expandForHover"></div>
<table cellspacing="5px">
    <thead>
        <tr>
            <th class="th">First</th>
            <th class="th">Second</th>
            <th class="th">Third</th>
        </tr>
    </thead>
    <tr>
        <td>this</td>
        <td>this2</td>
        <td>this2</td>
    </tr>
</table>
<div class="hoverableDiv"><a href="#" class="anchor">test</a>

</div>
<div class="hoverableDiv"><a href="#" class="anchor">test2</a>

</div>
<div class="hoverableDiv"><a href="#" class="anchor">test3</a>

</div>

CSS

table {
    background-color:#123456;
    margin-left:20px;
    margin-top:30px;
}
thead {
    background-color:#aaaaaa;
}
.hoverableDiv {
    position:fixed;
    background-color:none;
    text-align:center;
    border:1px solid black;
}
.anchor {
    background-color:#999999;
}

JS

var hovDivHeight = $(".hoverableDiv").height();
var tableSpacing = parseInt($("table").attr("cellspacing"), 10);

var numItems = $(".hoverableDiv").length;
$(".anchor").hide();

for (i = 0; i < numItems; i++) {
    var thLeft = $(".th:eq(" + i + ")").offset().left;
    var thTop = $(".th:eq(" + i + ")").offset().top;
    var thW = $(".th:eq(" + i + ")").width();
    var thH = $(".th:eq(" + i + ")").height();

    $(".hoverableDiv:eq(" + i + ")").css({
        left: thLeft + "px",
        width: thW + "px",
        top: thTop + "px",
        height: hovDivHeight + "px"
    });
}
$(".hoverableDiv").mouseover(function () {
    var aHeight = $(".anchor").height();
    var index = $(this).index()-2;
    $(this).css({
        height: hovDivHeight + tableSpacing+ thH + "px",
        top: thTop -thH -tableSpacing + "px"
    });
    $(".anchor:eq(" + index + ")").show();
});

$(".hoverableDiv").mouseout(function () {
    $(this).css({
        height: hovDivHeight + "px",
        top: thTop + "px"
    });
    $(".anchor").hide();
});

EDIT

---

I've added this fiddle: http://jsfiddle.net/ctwheels/xp9zjcr1/2/ which has basic styling, and removes the border as I mentioned you should do above.

---