将鼠标悬停在html和CSS中的图像上时如何显示文本？

Question

我已编写此代码以在页面左侧显示4张图像，并将鼠标悬停在图像上方时，这些图像右侧的div处显得更大。.我希望一些文本显示在右侧的大图像下，但是我做不到。 有什么建议么？ 这是我的代码：

 body{padding:20px 100px} a img{display:block;border:none;} .image-holder{ float:right; margin:42px 560px 0px 0; width:300px; height:350px; background:#ffffff; border:10px solid #000; padding:3px; position:relative; z-index:1; } ul.links{ list-style:none; margin:0 0px; padding:0; border:5px solid #000; border-bottom:none; width:100px; } .links li{ width:100px; border-bottom:10px solid #000; } .links li a span{ position:absolute; right:682px; top:222em; width:300px; height:300px; z-index:2; } .links li a:hover{ background:teal; color:#0f0; } .links li a:hover span {top:200px; } h1{text-align:center;margin:1em 0;} 

 <p class="image-holder"></p> <ul class="links"> <li><a href="image1.jpg"><img src="image1.jpg" width=100 height=100><span><img src="image1.jpg" width="300" height="300" alt="example image" /></span></a></li> <li><a href="image2.jpg"><img src="image2.jpg" width=100 height=100><span><img src="image2.jpg" width="300" height="300" alt="example image" /></span></a></li> <li><a href="image3.jpg"><img src="image3.jpg" width=100 height=100><span><img src="image3.jpg" width="300" height="300" alt="example image" /></span></a></li> <li><a href="image4.jpg"><img src="image4.jpg" width=100 height=100><span><img src="image4.jpg" width="300" height="300" alt="example image" /></span></a></li> </ul> 

Answer 1

 body{padding:20px 100px} a img{display:block;border:none;} .image-holder{ float:right; margin:42px 560px 0px 0; width:300px; height:350px; background:#ffffff; border:10px solid #000; padding:3px; position:relative; z-index:1; } ul.links{ list-style:none; margin:0 0px; padding:0; border:5px solid #000; border-bottom:none; width:100px; } .links li{ width:100px; border-bottom:10px solid #000; } .links li a span{ position:absolute; right:682px; top:222em; width:300px; height:300px; z-index:2; text-align:center; } .links li a:hover{ background:teal; color:#0f0; } .links li a:hover span {top:200px; } h1{text-align:center;margin:1em 0;} 

 <p class="image-holder"></p> <ul class="links"> <li><a href="image1.jpg"><img src="image1.jpg" width=100 height=100><span><img src="image1.jpg" width="300" height="300" alt="example image" /><em>Some Text</em></span></a></li> </ul> 

就像我在上面的代码中使用的那样，只需在<img>标签之后在span中添加一个标签，如果您想将其对齐到居中，则添加text-align:center; 我上面使用过的跨CSS的属性。

Answer 2

如果有效，我建议您使用javascript：

<li onmouseover="onMouseOverImage(1)">
    <a href="image1.jpg">
        <img src="image1.jpg" width=100 height=100>
        <span>
            <img src="image1.jpg" width="300" height="300" alt="example image" />
        </span>
    </a>
</li>

然后添加javascript处理。 如果您使用jQuery，它将变得更加容易：

<script>
    function onMouseOverImage(imageNumber) {
        var text = getTextForImage(imageNumber);
        var element = document.getElementById("IdOfTextDisplay");
        element.innerHtml = text;
    }
</script>

或使用jQuery：

<script>
    function onMouseOverImage(imageNumber) {
        $("IdOfTextDisplay").text(getTextForImage(imageNumber));
    }
</script>

不保证语法。 ;）

编辑：您可能必须将事件注册（onmouseover =“ onMouseOverImage（1）”）放入链接（a）或img中。 我现在不确定。

Answer 3

一种非常简单的方法是在<img>标签内添加title属性，如下所示：

<img title="Your text"/>