使用javascript在鼠标上方的图像顶部显示文本

我是javascript新手，希望有一个完全显示的图像，但当您将鼠标悬停在图像上时，文本会显示在div标记的顶部，并在背景中淡出图像

这是我的尝试，无论多么糟糕，它都不起作用

<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>

<script>

function fadeImg(obj) {

    obj.style.opacity=0.5;
    obj.filters.alpha.opacity=50;
}

function viewObj(obj1, obj2) {

   fadeImg(obj1);
   obj2.style.opacity=1;
   bj2.filters.alpha.opacity=100;
}

</script>

<div>
    <img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/>

    <div id='txt1' class='image_box_text' >This is image box one</div>
</div>

/*CSS样式表*/
div.image\u框\u文本{
不透明度：0；
利润上限：-25px；
背景色：#FFF；
}
功能fadeImg（obj）{
对象样式不透明度=0.5；
目标过滤器α不透明度=50；
}
功能视图OBJ（obj1、obj2）{
fadeImg（obj1）；
obj2.style.opacity=1；
bj2.过滤器.alpha.不透明度=100；
}
这是图像框一

提前感谢。

---

这应该让你开始

<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>

<script>

function fadeImg(obj) {
    obj.style.opacity=0.5;
}

function viewObj(obj1, obj2_name) {
   var obj2 = document.getElementById(obj2_name);
   fadeImg(obj1);
   obj2.style.opacity=1;
}

</script>

/*CSS样式表*/
div.image\u框\u文本{
不透明度：0；
利润上限：-25px；
背景色：#FFF；
}
功能fadeImg（obj）{
对象样式不透明度=0.5；
}
功能视图OBJ（obj1、obj2_名称）{
var obj2=document.getElementById（obj2_名称）；
fadeImg（obj1）；
obj2.style.opacity=1；
}

首先，不能像在

viewObj

中那样简单地通过id调用对象。您必须对其id执行

文档.getElementById

。接下来您必须检查过滤器是否存在（它仅在IE中存在）。更好的方法是在样式表中创建.laveled和.hidden类，并让hover事件触发它们的添加和删除

---

下面是一段实际操作的代码：

谢谢您的帮助，这是一个让我开始学习的好地方。