html - 在悬停时出现的 div 中出现文本时遇到问题

Question

我无法始终显示嵌套在仅在悬停时出现的 div 中的文本。我试图研究这个问题，但我尝试过的所有修复似乎都不起作用。我在代码上尝试了 visibility:hidden 和 display:none/display:block。我还尝试通过使用 #color-overlay:hover + #color-overlay{} 实现解决方案我的目标是隐藏加号并在有人使用鼠标时让它与#color-overlay 一起显示在卡的任何部分(不仅仅是加号本身)。

#book-card {
    width: 350px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -175px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 3px 3px 20px rgba(0,0,0, 0.5);
    text-align: center;
    background: url(images/book.jpg) no-repeat;
    background-size: 100%;
}

#color-overlay{
    width: 350px;
   height: 500px;
   position: absolute;
   z-index: 10;
   top: 50%;
   left: 50%;
   margin: -250px 0 0 -175px;
   display: none;
 }

#color-overlay:hover{
    background: rgba(139,0,0,0.8);
    transition: background 0.4s;
    cursor: pointer;
    display:block;
}

#plus {
    font-size: 70px;
    color: blue;
    position: relative;
    top: 41%;
}

<div id="book-card">
    <div id="color-overlay">
        <p id="plus">+</p>
    </div>
</div>

当我使用 display:none 时，#color-overlay 在悬停时不再改变并且不想再次出现。任何帮助将不胜感激，我觉得我遗漏了一些明显的东西。

Answer 1

更改此 CSS

#color-overlay{
    width: 350px;
    height: 500px;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -175px;
    opacity: 0;
    transition: all .5s;
 }

#color-overlay:hover{
    background: rgba(139,0,0,0.8);
    cursor: pointer;
    opacity: 1;
}