将鼠标悬停在图像上时如何在标签中显示图像名称答案

【问题标题】：How to Display Image name in Label on hovering over the image将鼠标悬停在图像上时如何在标签中显示图像名称
【发布时间】：2013-04-12 18:50:34
【问题描述】：

我有八张图片，当我将鼠标悬停在上面时，它们会放大 10 倍。现在我想在页面顶部的单独标签中显示悬停图像的名称（即第一张图像的 alt="a"）。如何使用 css 做到这一点？？

<div class="positioner11">
<a class="slide" aria-haspopup="true"><img class="a1" src="Insta/1.jpg" alt="a" /></a>
<a class="slide" aria-haspopup="true"><img class="a2" src="Insta/2.jpg" alt="b" /></a>
<a class="slide" aria-haspopup="true"><img class="a3" src="Insta/3.jpg" alt="c" /></a>
<a class="slide" aria-haspopup="true"><img class="a4" src="Insta/4.jpg" alt="d" /></a>
<a class="slide" aria-haspopup="true"><img class="a1" src="Insta/5.jpg" alt="e" /></a>
<a class="slide" aria-haspopup="true"><img class="a2" src="Insta/6.jpg" alt="f" /></a>
<a class="slide" aria-haspopup="true"><img class="a3" src="Insta/7.jpg" alt="g" /></a>

<a class="slide last" aria-haspopup="true"><img class="a5" src="Insta/8.jpg" alt="h" />       </a>

</div>

.positioner11 {position:absolute; left:0; top:576px;}

.slide {display:block; border:0; text-decoration:none; float:left; border-right:1px     solid #fff;}
.last {border:0;}
.slide img {display:block; border:0; width:50px; height:50px; cursor:pointer;
-webkit-transition-duration: .7s;
-moz-transition-duration: .7s; 
-o-transition-duration: .7s;
transition-duration: .7s;
}
.slide:hover img 
{
width:500px;
height:500px;

}

【问题讨论】：

我们需要查看您的 HTML/CSS 来回答这个问题..
欢迎来到 StackOverflow，请发布一些代码，以便我们看到您目前拥有的内容。
您好用户#######，欢迎来到 StackOverflow。请阅读stackoverflow.com/faq 以帮助 StackOverflow 用户帮助您。否则，这个问题不显示任何研究工作；它不清楚和/或没有用，可能需要一些主持人的注意才能挽救浪费。 --> 向我们展示您的代码。

标签： css image hover label zooming

【解决方案1】：

这是一个很好的例子：

$('ul li img').hover(
    function(){
        $(this).css('opacity','.5');
        var a = $(this).attr('alt');
        $(this).parent().append('<div class="title">' + a + '</div>');
    },
    function(){
        $(this).css('opacity','1');
        $(this).next().remove('.title');
    }
);

http://jsfiddle.net/dgKne/

【讨论】：