1

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

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

我所做的对我来说很有意义，并且是这个问题的答案。我究竟做错了什么？这看起来非常简单。

悬停时如何在图像上显示文字？

我将粘贴我的相关代码。与发布的链接答案相比，我有类 project1 而不是 imgWrapper 和 NovelDescript 而不是 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;
}

编辑

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

在此处输入图像描述

4

2 回答 2

0

我是这将解决你的问题

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

现场演示

于 2013-10-25T04:51:22.393 回答
0

你不需要这些职位。top:0;left: 0;绝对定位的 div 将始终显示在浏览器的左上角。还添加display:inline了novelDescripdiv 以显示在图像旁边。

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

希望这是您正在寻找的。

于 2013-10-25T04:01:00.880 回答