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

你应该看看CSS的否定功能（照顾浏览器兼容性）。 Reference

一种可能的方法是通过添加特定类使这些锚标签可选，并定义a :: hover不会触及此元素。另一种方法是使用选择器和.not-Feature。另一种“脏”的方法是使用“！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 */ }

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

a :: hover / after不用于图像

4 个答案: