Question

我想将左右图像导航作为悬停效果（参见图片navigation）。

我有这段代码：

HTML

<nav class="clearfix"> 
<ul class="clearfix">
<li><a href="#about">about</a></li>
<li><a href="#get_involved">get involved</a></li>
<li><a href="#kenia2016">kenia 2016</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>

CSS：

nav a:hover::before {
    content: "____";
    background: url('../img/mosterdseed_left.png') no-repeat;
    width: 200px;
    height: 200px;
}

当我删除CSS中的content属性时，图像变得不可见。我该如何防止这种情况？

Answer 1

只需撰写content: "";

即可

然后，您将拥有'空'内容。您需要为:: before和:: after伪元素添加content属性才能显示，但允许它是一个空字符串。

但默认情况下:: before和:: after是内联元素，它们将忽略宽度和高度。一旦你绝对定位它就会起作用。

下面是一个代码段，其中显示了您需要添加的内容才能使其正常运行。

nav a {
    /* To be able to absolutely possition the pseudo elements inside the link. */
    position: relative;
}

nav a:hover::before {
    background: url('../img/mosterdseed_left.png') no-repeat;
    width: 200px;
    height: 200px;
    
    /* To make the pseudo element visible in the first place. */
    content: "";

    /* To position the image */
    position: absolute;
    left: 0;
    top: 0;
  
    /* To make it visible, since the image cannot be loaded in the example */
    background-color: rgba(255, 0, 0, 0.3);
}

<nav class="clearfix"> 
<ul class="clearfix">
<li><a href="#about">about</a></li>
<li><a href="#get_involved">get involved</a></li>
<li><a href="#kenia2016">kenia 2016</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>

::之前和隐形背景图像

1 个答案: