a::hover/after not for image

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

现在，这也适用于插入到link元素中的图像，如下所示：

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

如何隐藏我的图像的这种样式？我不想让他们在悬停时有这样的背景...

Answer 1

你应该看看CSS的否定特性(注意浏览器兼容性)。Reference

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

Answer 2

您可以使用同级技巧：

​

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

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

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

你可以试试这个：

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