css :after and click function

Question

My need is to have a watermark on row's table.

I use this code (link to jsfiddle) to have the watermark. This is working fine, but I have a click function on some td element and this is covered by watermark.

How update css to have click and watermark visible. z-index is not working :/

Thanks for your help.

edit with good jsfiddle project link

User.Anonymous
– User.Anonymous

2014-07-22 09:14:11 +00:00
Commented Jul 22, 2014 at 9:14 — User.Anonymous
– User.Anonymous, Commented Jul 22, 2014 at 9:14

Samuli Hakoniemi · Accepted Answer · 2014-07-22 09:15:08Z

5

Set pointer-events: none; to the watermark. Then it works (http://jsfiddle.net/6YSXC/11/).

answered Jul 22, 2014 at 9:15

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bram Vanroy Over a year ago

Note that this won't work on IE 10 and less, nor on IE mobile 10.

amol · Accepted Answer · 2014-07-22 09:33:15Z

0

Along with the z-index you need to add position: relative then it will works well

Demo

.click{
    position: relative;
    z-index: 20;
    cursor: pointer;
}

answered Jul 22, 2014 at 9:33

amol

1,5559 silver badges10 bronze badges

1 Comment

User.Anonymous Over a year ago

Nice solution too. But a little bit more complex to implement this in my real table.

Collectives™ on Stack Overflow

css :after and click function

2 Answers 2

1 Comment

Demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related