CODEWITHSUNDEEP
htmlcss
ac_
ac_

Reputation: 1167

How do I stop my :after content from blocking my anchor?

I've made a simple Fiddle to demonstrate my problem. http://jsfiddle.net/JTqww/

HTML:

<body>
    <div class="button">
        <a href="#">
            <img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
            <span class="desc">Description</span>
        </a>
    </div>
</body>

CSS:

.button {
    float: left;
    width: 100px;
}

.button a {
    background:green;
    float:left;
    z-index:-1;
}

img {
    display:inline-block;
}

.desc{
    display:inline-block;
    text-align:center;
    width:200px;
    background-color:blue;
    color:white;
}
.button:after {
    position:   absolute; 
    top:        10%;
    left:       10%; 
    content:"I destroy your anchor";
    color:red;
    position:   absolute; 
    width:      50%;
    height:     50%;


    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}

As you can see, I've made a button with an overlaid glass reflection effect, on top of an image. I wanted the image and the description below to all be wrapped in an anchor tag (which they are but the :after content seems to block the anchor). If you move the mouse outside of the glossy white area, it will interact with the anchor but inside that area of white gloss it will not.

I've tried floating the anchor and changing the z-index but the content placed :after the button (the 'gloss') seems to stop the anchor from receiving mouse-overs and click events.

Anyone know how to fix this? Any help much appreciated.

Upvotes: 4

Views: 147

Answers (4)

Mr_Green
Mr_Green

Reputation: 41832

I workaround with your code, so that it looks nice.

Here is the fiddle

To make the click work on the added description too, just give :after to a or span tag instead of the class .button.

Working Fiddle

Upvotes: 3

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

As @Pete states, your generated content is not part of your anchor, so it won't act as such. The simplest fix is just to remove your div.button altogether, and apply that class directly to your a:

    <a href="#" class="button">
        <img SRC="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
        <span class="desc">Description</span>
    </a>

The generated content itself is part of the anchor and so is clickable. Your initial CSS needs some tidying up as well. The button class, whatever it's applied to, needs to have position: relative so that it creates a new positioning context. The overlay will then sit correctly - see this fork.

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Instead you can give direct div

<div class="button">
    <a href="#">
        <img src="http://www.mikesfreegifs.com/main4/halloween/comehere.gif"/>
        <div class="overlay">I destroy your anchor</div>
        <span class="desc">Description</span>
    </a>
</div>

DEMO

Upvotes: 0

Pete
Pete

Reputation: 58432

As your :after content is not part of the anchor it won't be clickable so you cannot place it over the top of your anchor and then expect to be able to click your anchor

now if you changed .before:after to .desc:after your link will be clickable:

http://jsfiddle.net/JTqww/2/

you'll just have to mess with the styles to get it to line up again

Upvotes: 2

Related Questions