1

我的代码中的 mouseleave 函数会覆盖 click 函数。我想要做什么：如果选择了图像（不透明度 1.0），那么悬停功能是否应该仅适用于其他 2 个元素（而不适用于所选元素）。

这是我的html

<div id="hover"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;" /></div>

<div id="hover1"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/></div>

<div id="hover2"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/></div>

我的jQuery

$("#hover").mouseover(function(){
        $("#hover").fadeTo(100, 1.0);
});

$("#hover").mouseleave(function(){
    $("#hover").fadeTo(100, 0.7);
});

$("#hover1").mouseover(function(){
    $("#hover1").fadeTo(100, 1.0);
});

$("#hover1").mouseleave(function(){
    $("#hover1").fadeTo(100, 0.7);
});

$("#hover2").mouseover(function(){
    $("#hover2").fadeTo(100, 1.0);
});

$("#hover2").mouseleave(function(){
    $("#hover2").fadeTo(100, 0.7);
});

$("#hover").click(function(){
        $("#hover").fadeTo(100, 1.0);
    $("#hover1").fadeTo(100, 0.7);
    $("#hover1").fadeTo(100, 0.7);
});

$("#hover1").click(function(){
    $("#hover1").fadeTo(100, 1.0);
    $("#hover").fadeTo(100, 0.7);
    $("#hover2").fadeTo(100, 0.7);
});

$("#hover2").click(function(){
    $("#hover2").fadeTo(100, 1.0);
    $("#hover").fadeTo(100, 0.7);
    $("#hover1").fadeTo(100, 0.7);
});

这是一个 jsfiddle： 我的 jsfiddle

我希望有一个人可以帮助我。提前致谢！

4

2 回答 2

2

我为你做了一些代码重构。

<div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;" />hover</div>
<div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/>hover1</div>
<div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/>hover2</div>

和简单的代码：

//select all image containers
var hoverContainers = $('.hover-img');
//initial fade out
hoverContainers.css('opacity', 0.7);
//mouseover and mouseleave binding
hoverContainers.hover(
  //mouseover
  function(){    
    $(this).fadeTo(100, 1);
  },
  //mouseleave
  function(){
    //check if you image has 'selected' class
    if (!$(this).is('.selected'))
      //if no fade out
      $(this).fadeTo(100, 0.7);
  }
);
//add 'selected' class on click
hoverContainers.click(function(){
  //remove 'selected' class from previously selected image
  hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7);
  //mark clicked image with 'selected' class
  $(this).addClass('selected');
});

jsfiddle与代码

最好的祝福

编辑 我忘了淡出以前选择的图像。

//add 'selected' class on click
hoverContainers.click(function(){
  //remove 'selected' class from previously selected image
  hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7);
  //mark clicked image with 'selected' class
  $(this).addClass('selected');
});

以下代码将发挥作用： hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7);

测试更新版本：http: //jsfiddle.net/3QLC6/7/

于 2013-01-11T12:06:44.920 回答
1

看到这个http://jsfiddle.net/3QLC6/5/

$("#hover1,#hover2").fadeTo(100, 0.7);

$("#hover, #hover1, #hover2").mouseover(function () {
   $(this).fadeTo(100, 1.0);
});

$("#hover,#hover1,#hover2").mouseleave(function () {
  if (!$(this).hasClass('selected')) {$(this).fadeTo(100, 0.7)};
});

$("#hover,#hover1,#hover2").click(function () {
  $(this).addClass('selected').fadeTo(100, 1.0).siblings('.selected').removeClass('selected').fadeTo(100, 0.7);
});

另请参阅类用法更新：http: //jsfiddle.net/3QLC6/6/

于 2013-01-11T12:18:08.627 回答