a::hover/after не для изображений

Для некоторых хороших ссылок на веб-сайте я использую псевдокласс a::hover и псевдоэлемент 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;
}

Теперь это применяется также к изображениям, когда они вставлены в элемент ссылки следующим образом:

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

Как я могу скрыть этот стиль для своих изображений? Я не хочу, чтобы у них был этот фон при наведении курсора...


image css hyperlink pseudo-element
person Irene    schedule 13.04.2015    source источник
comment
что именно вы пытаетесь сделать здесь?   -  person jbutler483    schedule 13.04.2015
comment
Можете ли вы добавить очистку в jsfiddle.net   -  person Faisal Khan Samrat    schedule 13.04.2015
comment
К вашему сведению: использование pointer-events:none для состояния наведения ссылки (или любого элемента, если на то пошло) не является хорошей идеей IMHO. В моих тестах это заставляет указатель мыши мерцать — что довольно логично, потому что всякий раз, когда элемент наводится, вы говорите, что курсор должен проходить «сквозь него», что затем отменяет состояние наведения, что удаляет pointer-events, что делает курсор наведите на него еще раз, что потом еще раз… и т.д. с.   -  person CBroe    schedule 13.04.2015

Ответы (4)


arrow_upward
0
arrow_downward

Вы можете использовать родственный трюк:

.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>

См. этот ответ: https://stackoverflow.com/a/17924223/586051

person Rahul Desai    schedule 13.04.2015

arrow_upward
0
arrow_downward

Ссылки могут иметь широкий спектр определенных стилей:

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

Вы можете попробовать это:

a img::hover, a img::after { /* Empty */ }
person Viktor Ek    schedule 13.04.2015

arrow_upward
0
arrow_downward

Вы должны взглянуть на функцию отрицания CSS (позаботьтесь о совместимости с браузером). Справочник

Один из возможных способов — сделать эти теги привязки доступными для выбора, добавив определенный класс и определив, что этот элемент не затрагивается a::hover. Другой способ — использовать селектор .not-Feature. Другой «грязный» способ — перезаписать это поведение с помощью «!important».

person KDon    schedule 13.04.2015

arrow_upward
0
arrow_downward

Этот пример должен сбросить эти значения по умолчанию (начальные):

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

Если нет, вы сможете сделать это на уровне базового элемента:

a img {
    pointer-events: initial;
    -webkit-backface-visibility: initial;
    backface-visibility: initial;
    -webkit-font-smoothing: initial;
    font-smoothing: initial;
}
person Davbog    schedule 06.08.2020