懸停時顯示圖像標題

Question

我正在嘗試使用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實現這樣的效果的任何建議？

Answer 1

有一種更好的方法來構建您的頁面：

<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 （在元素和代碼中）。

Answer 2

你甚至不需要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;
}​