CODEWITHSUNDEEP
htmlcss
Farzad Bayan
Farzad Bayan

Reputation: 251

The text over the image occupy the link click area

There is an image nested in an <a> tag, and some text (title and description) on it: 

<figure class="post-image">
            <a href="#">
                <img src="http://example.com/book.jpg">
            </a>

            <figcaption>
                <span>This is the title</span>
                <p>This is the paragraph.</p>
            </figcaption>
</figure>

figcaption{
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    font-size:20px;
} 
figure{
    position:relative
}

The problem is that the texts nested in <span> and <p> tags, occupy the click area of the <a> tag.

Here is the fiddle: http://jsfiddle.net/Mhyan/1/

Upvotes: 1

Views: 441

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99484

You could use pointer-events: none; on the absolutely positioned <figcaption> in order for it to be prevented from being the target of mouse events.

Example Here.

figcaption {
    /* other styles here... */
    pointer-events: none;
}

This way it behaves just like you're only hovering the anchor tag having an image.

It's worth noting that pointer-events property is supported in IE9+. However there is a polyfill for that.

Alternatively you could wrap the <figcaption> by the the anchor tag to include the nested elements. (Example Here).

But in this case you might need to style the anchor tag containing paragraph/span to act as a normal text. (Updated Example).

.post-image a,
.post-image a:visited,
.post-image a:hover,
.post-image a:active {
    color: black;
}

Upvotes: 2

shubhraj
shubhraj

Reputation: 387

         <figure class="post-image">
         <a href="#">
            <img src="http://example.com/book.jpg">
            <figcaption>
               <span>This is the title</span>
               <p>This is the paragraph.</p>
           </figcaption>
         </a>
         </figure>

Try this above code..

Upvotes: 1

James
James

Reputation: 4580

The figcaption has a position:absolute which positions this section over the top of the a tag. Try removing it.

Upvotes: 0

Related Questions