a::hover/after 不适用于图像答案

【问题标题】：a::hover/after not for imagesa::hover/after 不适用于图像
【发布时间】：2015-06-18 11:30:14
【问题描述】：

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

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

【问题讨论】：

你到底想在这里做什么？
你能在jsfiddle.net中添加clear吗
仅供参考：恕我直言，将pointer-events:none 用于链接（或任何元素）的悬停状态并不是一个好主意。在我的测试中，它使鼠标指针闪烁——这有点合乎逻辑，因为每当元素悬停时，你说光标应该“直接穿过它”，然后取消悬停状态，删除pointer-events，这使得光标再次悬停它，然后再次......等等。

标签： css image hyperlink pseudo-element

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

链接可以有多种特定样式：

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

你可以试试这个：

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

【讨论】：

【解决方案4】：

你可以使用兄弟技巧：

.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

【讨论】：