a::hover/after not for images

Question

For some nice links on a website, I'm using the pseudo class a::hover and the pseudo-element a::after:

a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #404d5b;
    vertical-align: bottom;
    text-decoration: none;
    white-space: nowrap;
}

a::hover,
a::after {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

Now this is applied also to images when inserted into a link-element like this:

<a href="#"><img src="source.jpg" /></a>

How can I hide this styling for my images? I don't want them to have this background when hovering...

FYI: Using `pointer-events:none` for the hover state of a link (or any element, for that matter) is not a good idea IMHO. In my tests, it makes the mouse pointer flicker – which is kinda logical, because whenever the element is hovered, you say the cursor is supposed to go “right through it”, which then cancels the hover state, which removes `pointer-events`, which makes the cursor hover it again, which then again … etc. pp. — CBroe, Apr 13 '15 at 08:18

score 0 · Answer 1 · edited Feb 03 '17 at 04:14

0

You should take a look at the negation feature of CSS (take care of the Browser-Compatibility). Reference

One possible way is to make those anchor tags selectable by adding a specific class and define that this element is not touched by the a::hover. Another way is to use the selector an the .not-Feature. Another "dirty" way is to overwrite this behaviour by using "!important".

edited Feb 03 '17 at 04:14

Angel Politis

10,955
14
48
66

answered Apr 13 '15 at 08:06

KDon

23
1
7

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

You can use the sibling trick:

.parent {
  width:100px;
  height:100px;
  padding:50px;
}

.parent:hover {
}

.child {
  height:100px;
  width:100px;
  background:#355E95;
  transition:background-color 1s;

  position: relative;
  top: -200px;
}

.child:hover {
  background:#000;
}

.sibling{
  position: relative;
  width:100px;
  height:100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background:#3D6AA2;
  transition:background-color 1s;    
}

.sibling:hover{
  background:#FFF;
  transition:background-color 1s;
}

<div class="parent">
  <div class="sibling"></div>
  <img src="http://www.dunbartutoring.com/wp-content/themes/thesis/rotator/sample-1.jpg" class="child" />
</div>

See this answer: https://stackoverflow.com/a/17924223/586051

Viktor Ek · Answer 3 · 2015-04-13T08:52:36.083

0

Links can have a broad range of specific styles:

a.mylink{border-bottom:2px solid red;}
a #mylink{border-bottom:2px solid green;}

You could try this:

a img::hover, a img::after { /* Empty */ }

edited Apr 13 '15 at 08:52

answered Apr 13 '15 at 08:44

Viktor Ek

353
1
13

Davbog · Answer 4 · 2020-08-06T01:06:37.417

This example should reset these values to default (initial):

a::hover img,
a::after img {
    pointer-events: initial;
    -webkit-backface-visibility: initial;
    backface-visibility: initial;
    -webkit-font-smoothing: initial;
    font-smoothing: initial;
}

If not you should be able to do so at the basic element level:

a img {
    pointer-events: initial;
    -webkit-backface-visibility: initial;
    backface-visibility: initial;
    -webkit-font-smoothing: initial;
    font-smoothing: initial;
}

a::hover/after not for images

4 Answers4