圖像懸停時的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>

我在這個演示中解決了這三個問題