Question

我的代码中的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： my jsfiddle

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

Answer 1

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

<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/

Answer 2

请参阅此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/

Mouseleave函数会覆盖单击函数JQuery

2 个答案: