0

我正在这个网站上工作：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});
  }
);

关于我做错了什么的任何想法？非常感谢大家。

4

3 回答 3

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"});
});
于 2013-05-31T11:22:51.730 回答
1

id 在 html < 5 中不能只是数字

因为你的 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});
});
于 2013-05-31T11:58:43.527 回答
0

你在哪里做这个代码

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

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

只是一个想法。

于 2013-05-31T11:30:54.207 回答