All geek questions in one place

How to stop mine: after the contents blocked my anchor?

I made a simple script 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 made a button with the effect of reflecting glass on top, on top of the image. I wanted the image and description below to be wrapped in an anchor tag (which they are: after the content, it seems to block the anchor). If you move the mouse outside the glossy white area, it will interact with the anchor, but it will not be inside the white gloss area.

I tried using the binding and changing the z-index, but the content was posted: after the button (“shine”) does not seem to allow the anchor to receive mouse and event events.

Does anyone know how to fix this? Any help is greatly appreciated.

+4
source share
4 answers

Since your :after content is not part of the anchor, it will not be clickable, so you won’t be able to place it on top of the top of your anchor, and then expect to be able to click on the anchor

Now, if you change .before:after to .desc:after , your link will be available:

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

you just need to mess with styles to make him line up again

+2
source

I will get along with your code to make it look good.

Here is the fiddle

To do a click job on the added description, simply add the :after tag to a or span instead of the .button class.

Working script

+3
source

According to @Pete, your generated content is not part of your anchor, so it will not act as such. The simplest solution is to simply delete your div.button as a whole and apply this 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 is therefore clickable. Your initial CSS needs some cleanup. The button class, no matter what it applies to, must have position: relative so that it creates a new positioning context. Then the inscription will sit correctly - see this plug .

0
source

Instead, you can give a straight 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

0
source

Source: https://habr.com/ru/post/1468945/

More articles:


All Articles