隐藏和揭示文本CSS

Question

我知道这个问题已被问了一百次，而且我已经阅读了最后一个问题。

我的图像也是一个链接。当图像悬停时，它会显示一个新图像，我还有一个小段落描述，当链接悬停在图像上时，我想在图像旁边弹出。简单，对吧？

我正在做的事情对我有意义，并且是这个问题的答案。我究竟做错了什么？这似乎非常简单。

How to show text on image when hovering?

我会粘贴相关代码。与发布的链接答案相比，我有类project1而不是imgWrapper和novelDescrip而不是imgDescription

HTML

<div class="project1">
        <a href="#"><img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" /></a>

        <p class="novelDescrip" >A website for a local musician to market, stream, and distribute music and merchandise.</p>

</div>

CSS

.project1 p {
    width: 25%;
    margin: 20px 15px 0 0;
    float: right;
}

.novelDescrip {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility opacity 0.2s;
}

.project1:hover .novelDescrip {
    visibility: visible;
    opacity: 1;
}

修改

现在这是我的问题，文本隐藏并显示，但只要我的鼠标悬停在我在此图像上绘制的矩形所包围的区域中，就会激活悬停。关于为什么会发生这种情况的任何想法？

Answer 1

您不需要这些职位。带有绝对定位div的top:0;left: 0;将始终显示在浏览器的左上角。还为display:inline添加了novelDescrip，以便在图片旁边显示div。

.project1 p {
    width: 25%;
    margin: 20px 15px 0 0;
    float: right;
}

.novelDescrip {
    position: absolute;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility opacity 0.2s;
    display:inline;
}

.project1:hover .novelDescrip {
    visibility: visible;
    opacity: 1;
}

希望这就是你要找的东西。

Answer 2

我会这会解决你的问题

img {
    height:30%;
    width:30%;
}
.project1 p
{
    width: 65%;
    float: right;
    display:none;
    margin-left:5px;
}
.project1:hover .novelDescrip
{
    display:block;
}

Live Demo