图像悬停时的CSS文本不起作用

Question

当你将鼠标悬停在图像上时，我正试图让照片描述发生。 这听起来像一个简单的任务，但我不能让它工作。 我已经尝试了几种不同的方法，但都没有工作，或者弹出窗口到处都是或者弄乱了我的div。

这是我的HTML：

<div id="box">
    <div class="mainimg">
        <a href="url" target="_blank">
            <img src="'thumbnail">
        </a>
        <span class="text">
            <p>'item.comment'</p>
        </span>
    </div>
    <div class="pfooter">
        <img src="avatar">
        <a href="userhome" target="_"blank">username</a>
    </div>
</div>

我的CSS：

#box {
    width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:10px;
}
#box .mainimg img {
    width: 160px;
    height 160px;
    margin-bottom:10px;
    border:1px solid #;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
}
#box .mainimg span.text {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}
#box mainimg:hover span.text {
    opacity: 1;
}
#box .pfooter img {
    width: 50px;
    height: auto;
    position;
    absolute;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    float: left;
    color: #333;
    font-weight: bold;
}
#box .pfooter {
    height: 50px;
    width: 160px;
    font-size:0.75em;
}
#box .pfooter a {
    color: #808080;
    text-decoration: none;
}

Answer 1

您在其中一个.mainimg选择器上缺少一个点

这是你想要的： 工作CodePen演示

#box {
    width:180px;
    height:260px;
    display:inline-block;
    margin-left:20px;
    margin-bottom:10px;
    position: relative;
}
#box .mainimg img {
    width: 160px;
    height 160px;
    margin-bottom:10px;
    border:1px solid #;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
}
#box .mainimg .text {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 142px;
    left: 0;
    position: absolute;
    top: 0;
    width: 152px;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    border:1px solid #;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 4px;
}
#box .mainimg:hover .text {
    opacity: 1;
}
#box .pfooter img {
    width: 50px;
    height: auto;
    position;
    absolute;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    float: left;
    color: #333;
    font-weight: bold;
}
#box .pfooter {
    height: 50px;
    width: 160px;
    font-size:0.75em;
}
#box .pfooter a {
    color: #808080;
    text-decoration: none;
}

看起来你做得很好，只需要调整文本框的位置。 添加position: relative; 到#box是一个好的开始。 我也绕过了角落。

请参阅我上面链接的codepen演示以获得更多调整。

Answer 2

有三个问题

1. 是你没有. 在mainimg:hover之前mainimg:hover

    #box .mainimg:hover span.text { opacity: 1; } 

2. 你需要在#box .mainimg span.text的top和left添加一些值

    #box .mainimg span.text { background: rgba(0, 0, 0, 0.5); color: white; cursor: pointer; display: table; height: 150px; left: 34px; position: absolute; top: 12px; width: 150px; opacity: 0; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } 

3. 您的部分HTML不正确<a href="userhome" target="_"blank">username</a>应为<a href="userhome" target="_blank">username</a>

我在这个演示中解决了这三个问题