Question

我在这个网站上工作：http://users.telenet.be/blijvendvertrek/default.htm。

现在我想确定当我将鼠标悬停在位于a中的三个导航项目之一（'Renovaties'，'Gerechtelijke expert'或'Over mij'）时，右下方相应的图像会改变其不透明度（从0.6到1.0）。

通过CSS，我已经确定，如果将鼠标悬停在它上面，这三个图像中的每一个都会改变其不透明度，但当我将鼠标悬停在导航项目上时，我似乎无法生成相同的效果。我已插入一个脚本来实现此效果，但它不起作用。

这是三个导航项之一的html：

<div id="navigation">
    <ul>
    <li id="1"><a href="renovaties/renovaties.htm" title="Renovaties">RENOVATIES</a></li>
    </ul>
    </div>

这是相应内容项的html：

<div id="content">
    <div class="kolom links">
       <a href="renovaties/renovaties.htm" title="Renovaties">
                        <img src="images/Icoon - Renovaties.png" alt="Renovaties" id="img-1"/></a>
    </div>
    </div>

这是我无法工作的剧本：

$("#img-1, #img-2, #img-3").css('opacity','0.6');

$("#1").hover(function () {
    $('#img-1').css({opacity : 1.0});
  }, 
  function () {
    $('#img-1').css({opacity : 0.6});
  }
);

$("#2").hover(function () {
    $('#img-2').css({opacity : 1.0});
  }, 
  function () {
    $('#img-2').css({opacity : 0.6});
  }
);

$("#3").hover(function () {
    $('#img-3').css({opacity : 1.0});
  }, 
  function () {
    $('#img-3').css({opacity : 0.6});
  }
);

关于我做错的任何想法？非常感谢你们。

Answer 1

DEMO：http://jsfiddle.net/Xc6ug/2/

更好使用mouseenter和mouseleave而不是像这样悬停

$("#1").mouseenter(function () {
$('#img-1').css({"opacity","1"});
});

$("#1").mouseleave(function () {
$('#img-1').css({"opacity", "0.6"});
});

Answer 2

id不能只是html中的数字＆lt; 5

因为你的李是有序的，你可以使用.index（）

$("#navigation li").hover(function(){
    var n = $(this).index()+1;
    $('#img-'+n).css({opacity:1});
},function(){
    var n = $(this).index()+1;
    $('#img-'+n).css({opacity:0.6});
});

Answer 3

您执行此代码的位置

$("#img-1, #img-2, #img-3").css('opacity','0.6');

尝试在css文件中设置不透明度，或在页面加载时设置为内联样式。只需将此代码包含在内，就可以不断重置您在运行中所做的任何更改。

只是一个想法。

将鼠标悬停在一个div上，在另一个div中生成图像的不透明度（使用jquery）

3 个答案: