Javascript 悬停时显示图像标题

我试图使用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实现这种效果，有什么建议吗？

有一种更好的方法来构建页面：

<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>

//为单击的img设置标题
函数标题（img）{
//查找id为“caption”的元素
var ctrl=document.getElementById（“标题”）；
//设置元素的文本=img的alt属性
警报（img.alt）；
ctrl.innerText=img.alt；
//设置css显示属性=块（显示元素）
ctrl.style.display=“块”；
//隐藏defaultCaption元素
document.getElementById（“defaultCaption”）.style.display=“无”；
}
//显示defaultCaption并隐藏标题div
函数clearCaption（）{
document.getElementById（“defaultCaption”）.style.display=“block”；
document.getElementById（“标题”）.style.display=“无”；
}







默认标题文本

更新： 难道没有发现图像标签的格式不正确吗我把它改写成了一个图像列表

---

如果需要li元素，请将

alt

更改为

title

（在元素和代码中）。

有一种更好的方法来构造页面：

<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>

//为单击的img设置标题
函数标题（img）{
//查找id为“caption”的元素
var ctrl=document.getElementById（“标题”）；
//设置元素的文本=img的alt属性
警报（img.alt）；
ctrl.innerText=img.alt；
//设置css显示属性=块（显示元素）
ctrl.style.display=“块”；
//隐藏defaultCaption元素
document.getElementById（“defaultCaption”）.style.display=“无”；
}
//显示defaultCaption并隐藏标题div
函数clearCaption（）{
document.getElementById（“defaultCaption”）.style.display=“block”；
document.getElementById（“标题”）.style.display=“无”；
}







默认标题文本

更新： 难道没有发现图像标签的格式不正确吗我把它改写成了一个图像列表

---

如果您想要li元素，那么将

alt

更改为

title

（在元素和代码中）。

您甚至不需要JavaScript。您可以通过CSS实现它

在JSFIDLE上查看它的实际操作：

标记：

<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>

---

您甚至不需要JavaScript。您可以通过CSS实现它

在JSFIDLE上查看它的实际操作：

标记：

<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>

---

你不能使用alt=“Caption”？我可能会使用title=，但我不知道如何实现以满足所需效果的要求。你不能使用alt=“Caption”？我可能会使用title=，但我不知道如何实现以满足所需效果的要求。谢谢：）我感谢你的帮助。哇！我会尝试一下，然后再报告。我会添加一个jQuery方法供您查看，但我建议您先了解一下报告的基本内容。我将class属性附加到li中，并用title替换alt，因为我不需要图像标记。它工作完美无瑕。不仅要感谢你的帮助，还要感谢你把它分解，帮助我了解到底发生了什么。谢谢：）我感谢你的帮助。哇！我会尝试一下，然后再报告。我会添加一个jQuery方法供您查看，但我建议您先了解一下报告的基本内容。我将class属性附加到li中，并用title替换alt，因为我不需要图像标记。它工作完美无瑕。不仅要感谢你的帮助，还要感谢你将它分解，帮助我了解到底发生了什么。