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/

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

1 个答案: