Question

My project requirements has changed from my previous post.

I now have a div that contains an image, and content (text with a link) overlayed ontop. The content has the same dimensions as the image. My problem now is that I cannot click on the link assigned to the image. I believe this is because the content is hiding background link.

http://jsfiddle.net/2mjne/1/

HTML

<div class="ad">
    <img src="http://www.placekitten.com/320/200">
    <a href="#">  
        <div class="content">
             text
             <a class="link" href="">link</a>
        </div>
    </a>
</div>

CSS

.ad {
    position: relative;
    height: 200px;
    width: 320px;
}
.content {
    position: absolute;
    top: 0;
    height: 200px;
    width: 320px;
}
.link {
    visibility: hidden;
}

JS

$(document).ready(function() {
    $('.content').mouseover(function() {
        $(this).find('.link').css('visibility', 'visible');
    });
    $('.content').mouseout(function() {
        $(this).find('.link').css('visibility', 'hidden');
    });
    $('a').click(function() {
        console.log('a clicked');
    });
    $('.link').click(function() {
        console.log('button clicked');
    });
});

EDIT: There are two different links in my module. One link is from the background image, and the other link is from the a tag found in .class.

Answer 1

This is my solution which sort of works. The only issue I have is that is you mouse over the text area to the left of ‘meow’ and below the word ‘my’, you will notice you are still in the region of the text link instead of the background link. This is because the text link still has jurisdiction over this space. I am trying to figure out how to get rid of it.

http://jsfiddle.net/WHpMr/