javascript - 文本悬停在图像上

Question

如何使文本悬停在图像上？我希望文本框恰好出现在图像所在的位置，以便图像完全消失，并且在鼠标移出图像时重新出现。我搜索了每个人，但我只发现悬停效果与图像所在的悬停框的位置不同......

Answer 1

不需要 JavaScript，除非你想要一些不依赖 CSS3 的平滑过渡。假设图像具有固定尺寸，您将执行以下操作：

<div>
    <p>Text</p>
    <img src="" alt="" width="100px" height="100px" />
</div>

div { position:relative; z-index:1; height:100px; width:100px;  }
img { position:absolute; top:0; left:0; z-index:2; }
div:hover img { display:none; }

JSF中。

Answer 2

CSS：

.textHover {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0; left:0;
    text-align:center;
    color:white;
}
.imgContain {
    position:relative;
    display:table;
}
.imgContain:hover .textHover {
    display:block;
}

标记：

<div class="imgContain">
    <img src="http://placehold.it/300x200"/>
    <div class="textHover">My text here</div>
</div>

http://jsfiddle.net/EACxV/

Answer 3

您不需要 JavaScript 代码来执行此操作。在纯 html 和 css 中它会很好地工作。下面是带有不透明度变化的 css 动画的示例。

html

    <div class="hvrbox">
        <img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Bochnia_poland_saltmine.jpg" alt="盐矿" class="hvrbox-layer_bottom">
        <div class="hvrbox-layer_top">
            <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit。Fusce porttitor ligula porttitor, lacinia sapien non.</div>
        </div>
    </div>

css

    .hvrbox,
    .hvrbox * {
        box-sizing：边框框；
    }
    .hvrbox {
        位置：相对；
        显示：内联块；
        溢出：隐藏；
        最大宽度：100%；
        高度：自动；
    }
    .hvrbox img {
        最大宽度：100%；
    }
    .hvrbox .hvrbox-layer_bottom {
        显示：块；
    }
    .hvrbox .hvrbox-layer_top {
        不透明度：0；
        位置：绝对；
        顶部：0；
        左：0；
        右：0；
        底部：0；
        宽度：100%；
        高度：100%；
        背景：rgba(0, 0, 0, 0.6);
        颜色：#fff;
        填充：15px；
        -moz-transition：所有 0.4s 缓入出 0s；
        -webkit-transition：所有 0.4s 缓进出 0；
        -ms-transition：所有 0.4s 缓入出 0s；
        过渡：所有 0.4s 缓入缓出 0s；
    }
    .hvrbox：悬停 .hvrbox-layer_top，
    .hvrbox.active .hvrbox-layer_top {
        不透明度：1；
    }
    .hvrbox .hvrbox-文本 {
        文本对齐：居中；
        字体大小：18px；
        显示：内联块；
        位置：绝对；
        最高：50%；
        左：50%；
        -moz 转换：翻译（-50%，-50%）；
        -webkit-transform: 翻译(-50%, -50%);
        -ms-transform: 翻译(-50%, -50%);
        变换：翻译（-50%，-50%）；
    }
    .hvrbox .hvrbox-text_mobile {
        字体大小：15px；
        边框顶部：1px 纯色 rgb(179, 179, 179); /* 对于旧浏览器 */
        边框顶部：1px 实心 rgba(179, 179, 179, 0.7);
        边距顶部：5px；
        填充顶部：2px；
        显示：无；
    }
    .hvrbox.active .hvrbox-text_mobile {
        显示：块；
    }

我在这里http://goo.gl/EECjCm用许多类似的例子（有更好的动画）描述了它