顯示圖片說明當鼠標懸停

我試圖使用JavaScript來顯示，只有當它被盤旋的圖像的標題，並有當沒有圖像懸停默認字幕顯示。顯示圖片說明當鼠標懸停

<ul class="logos"> 
    <li class="image-1"></li> 
    <li class="image-2"></li> 
    <li class="image-3"></li> 
    <li class="image-4"></li> 
    <li class="image-5"></li> 
</ul> 

<div class="captions"> 
    <p>Default caption</p> 
    <p>This is a caption for the first logo</p> 
    <p>This is a caption for the second logo</p> 
    <p>This is a caption for the third logo</p> 
    <p>This is a caption for the fourth logo</p> 
    <p>This is a caption for the fifth logo</p> 
</ul>

有關如何使用javascript實現此類效果的任何建議？

來源

2012-05-18 Rich

你能不能用ALT = 「標題」？ – mawburn

我大概可以使用title =，但我不知道如何實現以滿足所需效果的要求。 – Rich

有一個更好的方式來組織你的頁面：

<script language="javascript" type="text/javascript"> 

    // sets the caption for the clicked img 
    function caption(img){ 
     // finds the element with an id="caption" 
     var ctrl = document.getElementById("caption"); 

     // sets the text of the element = the alt property of the img 
     alert(img.alt); 
     ctrl.innerText = img.alt; 

     // sets the css display property = block (shows the element) 
     ctrl.style.display = "block"; 

     // hides the defaultCaption element 
     document.getElementById("defaultCaption").style.display = "none"; 
    } 

    // shows the defaultCaption and hides the caption div 
    function clearCaption() { 
     document.getElementById("defaultCaption").style.display = "block"; 
     document.getElementById("caption").style.display = "none"; 
    } 
</script> 

<ul class="logos"> 
    <!-- 
     alt : an alternative text description for an image 
     onmouseover : event handler that fires as the mouse moves over image 
     onmouseout : event handler that fires as the mouse moves off the image 
    --> 
    <li><img class="image-1" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li> 
    <li><img class="image-2" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li> 
    <li><img class="image-3" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li> 
    <li><img class="image-4" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li> 
    <li><img class="image-5" alt="caption text" onmouseover="caption(this)" onmouseout="clearCaption()"/></li> 
</ul> 

<div id="caption" style="display:none"></div> 
<div id="defaultCaption">default caption text</div>

更新：沒有發現該圖片代碼是畸形？ - 我已將它重寫爲圖像列表。

如果您想要li元素，請將alt更改爲title（在元素和代碼中）。

來源

2012-05-18 21:49:24

謝謝:)我感謝你的幫助。 – Rich

哇！我會放棄並報告。 – Rich

我釘在jQuery的方法，讓你看看，但我建議你讓你的頭周圍的基礎知識第一 –

你甚至不需要的JavaScript。你可以通過CSS來實現它。

在的jsfiddle看到它在行動：http://jsfiddle.net/phusick/n6wTr/

標記：

<div class="container"> 
    <ul class="logos"> 
     <li class="image i1"> 
      <p class="caption">1st caption</p> 
     </li> 
     <li class="image i2"> 
      <p class="caption">2nd caption</p>   
     </li> 
     <li class="image i3"> 
      <p class="caption">3rd caption</p>     
     </li> 
    </ul> 
</div>

CSS：

div.container { 
    position: relative; 
    padding-top: 2em; 
} 

li.image p.caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
} 

li.image:hover p.caption { 
    display: block; 
}

來源

2012-05-18 22:23:36 phusick

顯示圖片說明當鼠標懸停

回答

相關問題