如何在懸停在圖像上的標籤上顯示圖像名稱

當我將鼠標懸停在圖像上時，我有八個圖像放大到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; 

}

來源

2013-04-12 user2275671

我們需要看到你的HTML/CSS來回答這個問題.. – Adrift

歡迎StackOverflow的，請張貼一些代碼，所以我們可以看到你到目前爲止。 – Revent

嗨用戶#######並歡迎來到StackOverflow。請閱讀http://stackoverflow.com/faq以幫助StackOverflow用戶爲您提供幫助。否則，這個問題沒有顯示任何研究工作;它不清楚和/或沒有用處，可能需要一些主持人的注意力來挽救浪費。 - >向我們顯示您的代碼。 –

這裏有一個很好的例子：

$('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/

來源

2013-04-12 19:02:48 Riskbreaker

如何在懸停在圖像上的標籤上顯示圖像名稱

回答

相關問題