Question

我想在悬停过滤器的图片上方显示一个字词。

我尝试使用:before执行此操作，但它无法正常工作。

HTML

<p><a class="photo" href="image.jpg"><img src="image.jpg" /></a></p>

CSS

.photo { position: relative; }
.photo:hover { filter: brightness(0.5); -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); z-index: 9; }
.photo:hover:after { content: "test"; font-family: "arial"; position: absolute; height: 50px; width: 50px; top: 50%; left: 50%; z-index: 99; color: #fff; font-size: 50px; opacity: 0; }

这是JSFiddle演示：http://jsfiddle.net/y5j90ccn/

如何解决这个问题？

Answer 1

将.photo:hover:after中的不透明度设置为1：

.photo {
    position: relative;
}

.photo:hover{
    filter: brightness(0.5); -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); z-index: 9;
}

.photo:hover:after { content: "test"; font-family: "arial"; position: absolute; height: 50px; width: 50px; top: 50%; left: 50%; z-index: 99; color: #fff; font-size: 50px; opacity: 1; }

demo

Answer 2

你的问题是你写了“不透明度：0;”，它将文本的不透明度设置为0 - 使其不可见。只需拿出那个css属性，你就会看到文字。

此外，这通常无关紧要，并且有点挑剔，但您通常希望使用“:: after”而不是“：after”。

Answer 3

请尝试：http://jsfiddle.net/y5j90ccn/8/

    <div><a class="photo" href="http://www.sticker-autocollant.com/3769-4997-large/stickers-geant-deco-vue-sur-la-mer-et-montagne.jpg">
    <img src="http://www.sticker-autocollant.com/3769-4997-large/stickers-geant-deco-vue-sur-la-mer-et-montagne.jpg" />
        <div class="hover_text"> Hover me</div>
    </a></div>


.photo , div{
   float: left;
    position: relative;
    width: auto;
}
    .hover_text{    background: none repeat scroll 0 0 #fff;
        color: #000;
        font-size: 20px;
        height: 50px;
        line-height: 50px;
        opacity: 0.5;
        position: absolute;
        text-align: center;
    bottom: 4px;    
        width: 100%; display:none;transition: all 0.5s ease-in;}
    div:hover .hover_text{display:block; transition: all 0.5s ease-in;}

Answer 4

您只需要更新您的css，如下所示，不透明度和文本位置将更改为已过期的结果。

   .photo {
    position: block;
    -webkit-transition: all 30ms;
    -moz-transition: all 30ms;
    transition: all 30ms;
    max-width: 50%;
}

.photo:hover {
    filter: brightness(0.5); -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); z-index: 9;
}

.photo:after { content: "test"; font-family: "arial"; position: absolute; height: 50px; width: 50px; top: 30%; left: 20%; z-index: 99; color: #fff; font-size: 50px; opacity: 0; }
.photo:hover:after{ opacity:1; }

Answer 5

似乎有几件事要做，以达到你想要的目的。

删除阻止文字显示的opacity: 0。
将position: relative移至父元素<p>。
将<p>设置为inline-block，使其没有容器的整个宽度，位置将更像预期。

.test {
    position: relative;
    display: inline-block;
}

.test img:hover {
filter: brightness(0.5); -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5);
}

.photo:hover:after { 
content: "test"; font-family: "arial"; width: 50px; height: 50px; position: absolute; 
top: 40%; left: 40%; color: #fff; font-size: 50px;
}

看看：http://jsfiddle.net/y5j90ccn/13/

Answer 6

这是解决方案。 JSFIddle，Opacity应大于0。

Answer 7

只需在图片标记上添加title属性即可实现此目的。如下：

<a class="photo" href="image.jpg"><img src="image.jpg" Title="This is where your word go" /></a>

在悬停时在图片上方显示一些字符

7 个答案: