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

Question

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

现在我想确定，当我将鼠标悬停在位于 a 中的三个导航项（“Renovaties”、“Gerechtelijke 专业知识”或“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

演示：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

html中id不能只有数字

因为你的 li 是有序的，你可以使用 .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 文件中设置不透明度，或者在页面加载时将其设置为内联样式。 只需封装此代码即可不断重置您在运行中所做的任何更改。

只是一个想法。