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选择器上缺少一个点

这是你想要的：Working CodePen demo

#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 demo了解更多内容。

Answer 2

有三个问题

您在.

之前没有mainimg:hover

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

您需要为top

中的left和#box .mainimg span.text添加一些价值

#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;
}

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

我在这个demo

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

2 个答案: