Question

我通过使用：after伪属性应用内容来设计一个悬停的锚点，后者在下面添加了一个边框：

a:hover {
    position: relative; }
    a:hover:after {
        content: '';
        position: absolute;
        left: 0;
        display: inline-block;
        height: 1em;
        width: 100%;
        border-bottom: 1px solid #a5cf4c;
        margin-top: 0.5em; }

这样可以正常工作，但图像周围也有一些锚点，我不希望它们下面有边框。对于CSS，这只适用于不存在的父选择器a:after < img。我尝试用jQuery解决它，但

你无法操纵：之后，因为它在技术上不是DOM的一部分，因此任何JavaScript都无法访问它。请参阅Access the css ":after" selector with jQuery。

我在没有父障碍的情况下看了一些解决方案，但是我无法用这个来解决问题。任何人吗？

Answer 1

您可以使用类添加after。

＆＃13;

$('a:not(:has(img))').addClass('after-affect');

＆＃13;

a:hover {
  position: relative;
}
a.after-affect:hover:after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid #a5cf4c;
  margin-top: 0.5em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Anchor with text -->
<a href="#">test</a>

<!-- Anchor with image -->
<a href="#">
  <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/>
  </a>

＆＃13;

如果孩子是img，改变a：样式之后

1 个答案: