a::悬停/之后不适用于图像

Question

对于网站上的一些不错的链接，我使用的是伪类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>

如何隐藏图像的此样式？我不希望他们在悬停时有这个背景......

Answer 1

您可以使用同级技巧：

.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

Answer 2

链接可以具有广泛的特定样式：

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

你可以试试这个：

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

Answer 3

你应该看看CSS的否定功能（注意浏览器兼容性）。参考

一种可能的方法是通过添加特定类来选择这些锚标记，并定义此元素不会被 a：：hover 触及。另一种方法是使用选择器和 .not-Feature。另一种"肮脏"的方法是使用"！important"来覆盖此行为。

Answer 4

此示例应将这些值重置为默认值（初始）：

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;
}