Question

任何人都可以帮助我解决我遇到的问题吗？我正在尝试使用after伪元素添加一些内容，以便人们知道他们可以将鼠标悬停在图像上以获取内容，但是我失败了。

我已经尝试将下面的CSS添加到我的容器中，但它实际上并没有做任何事情，我不知道我之前做了什么，但我有一些图像显示，但现在似乎已经很久了。

content: "\e609";
position: absolute;
top: -25%;
left: 0;
width: 100%;
speak: none;
color: white;
font-weight: bold;
z-index: 1;

这是我的HTML

<div class="four columns img-overlay" style="position: relative; border: 1px solid #E1E1E1;">
    <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;">
    <div style="display: inline-block; position: absolute; top: -11px; right: -11px; z-index: 10;">
        <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png">
    </div>
    <div style="position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); text-align: center;">
        <p style="display: inline-block; background: rgba(0, 0, 0, 0.35); font-family: 'Amatic SC'; color: #FFF; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">Featured One</p>
    </div>
    <div class="overlay">
        <h5 style="padding-top: 11px; margin: 0 0 15px 0;">Sub Title</h5>
        <p style="margin: 0 0 15px 0; padding: 0;">Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!!</p>
        <p style="margin: 0 0 15px 0; padding: 0 0 20px 0;"><a href="#">Featured Link</a></p>
    </div>
</div>

我只想添加一些内容以显示用户可以将鼠标悬停在内容

上

感谢您的帮助。

Answer 1

我根据您的问题中的代码创建了一个小提琴，问题出在top: -25%，在您的css中有这一行，内容已从屏幕边缘消失，因此无法看到。看看我的小提琴，是你想要的吗？ http://jsfiddle.net/ey7hy6p0/

之后使用伪元素添加“之前”的内容

1 个答案: