javascript - 使用javascript在鼠标悬停在图像上时显示文本

Question

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

提前致谢。

Answer 1

<小时/>

这应该可以帮助您入门。

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

首先，您不能像在 viewObj 中那样简单地通过 id 调用对象。您必须对其 id 执行 document.getElementById 操作。接下来您必须检查过滤器是否存在(仅在 IE 中存在)。更好的方法是在样式表中创建 .faded 和 .hidden 类，并让悬停事件触发它们的添加和删除。

这是正在运行的代码:http://jsfiddle.net/WpMGd/