Html 隐藏和显示文本css

我知道这个问题已经被问过一百次了，我已经读过了每一个问题

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

我所做的对我来说是有意义的，也是这个问题的答案。我做错了什么？这似乎很简单

我将粘贴我的相关代码。与贴出的链接答案相比，我用类project1代替imgWrapper，用novelDescrip代替imgDescription

HTML

编辑

这是我现在的问题，文本隐藏和显示，但每当我的鼠标悬停在我在这幅图像上绘制的矩形所包围的区域时，悬停就会被激活。你知道为什么会这样吗

---

你不需要这些职位。排名：0；左：0；使用绝对定位时，div将始终显示在浏览器的左上角。还添加了display:inline，使div的novelDescrip显示在图像旁边

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

---

希望这就是你要找的。

我的天，这会解决你的问题吗

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

---

我还要提到的是，它隐藏了文本，但它不使其可见。文本到图像意味着什么？就在图像的右边？还是更低？如果在下面，只需删除位置：绝对；和浮动：对；这一段应该显示在这幅作品的右边！它使段落隐藏和显示。但是，激活显示的区域远远大于图像。你知道为什么吗？如果我把鼠标悬停在图片上方或与图片处于同一高度，段落就会被激活。你使用的是宽度：25%；。尝试更改为固定宽度：150px；此外，如果z索引位于任何其他元素的后面，则可以将p的z索引设置为更高的值。这也可以用于隐藏和显示。谢谢你知道为什么悬停区域比我的图像大吗？我在原来的帖子上发布了一个屏幕截图。@zburns12因为hover是为container div类设置的，如果您希望它是samller，请仅更改image的悬停。这样做很有意义，但是，显示停止工作。它总是隐藏的。我的图片的id=novel，所以我不把它改为novel:hover.novelDescrip{display:block；}吗？还是我做得不对？

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

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