JQUERY - 鼠標移出

Question

我使用.mouseout有問題我不是專家:)

我有一組圖片（IDS與圖像＃1，＃圖像-2 ..）是徘徊了一組時<使用ID＃for-image-1，＃for-image-2 ...爲指定圖像指定不透明度：

這是腳本/ WORKS FINE /的第一部分，它可以消除所有的不透明度圖像，並增加了不透明類來分配圖像盤旋正確<跨度>

<script> 
$(document).ready(function() { 
    $("#secciones span").hover(function() { 
    $("#golfball img").removeClass("opaque"); 

    var imageToShow = $(this).attr("id").replace("for-", ""); 
    $("#golfball #"+imageToShow).addClass("opaque"); 

    }); 
}); 

</script> 

時這是另一半，並在I'm遇到的問題，我想是有編號的圖像-1對小鼠恢復了透明度>

<script> 
$(document).ready(function() { 
    $("#secciones span").mouseout(function() { 
    $("#image-1").addClass("opaque"); 

    }); 
}); 

</script> 

感謝的任何<跨度事先第一形象！

Answer 1

可能是一個愚蠢的問題，但是有沒有理由在另一個鼠標中使用鼠標懸停？

此外，您是否創建了具有相同ID的多個HTML元素？ ID在你的HTML中應該是唯一的，類標籤不一定是。這可能會導致不良影響。

jQuery的API頁面（http://api.jquery.com/mouseover/）對於鼠標懸停/鼠標移出顯示鏈接的元素這兩個事件的例子：

$("div.overout").mouseover(function() { 
    i += 1; 
    $(this).find("span").text("mouse over x " + i); 
    }).mouseout(function(){ 
    $(this).find("span").text("mouse out "); 
    }); 

如果我理解正確，這是你想給一個鏡頭是什麼用。

Answer 2

不知道我很正確理解這一點，但如果你想要得到的不透明度回到鼠標移開時

$("#image-1").addClass("opaque"); 

也許改變

$("#image-1").removeClass("opaque"); 

Answer 3

你需要IE6-支持？如果是的話 - 讓你的老闆明白，IE6很爛，每個人都使用它不值得成爲你的客戶：P（哦，如果它真的那麼簡單......）。但是，如果你不需要這些，你並不需要在所有的JavaScript，一個簡單的CSS會做：

演示：http://jsfiddle.net/2GXny/

<div class="imgContainer"> 
    <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" /> 
    <span>lalalalalaa</span> 
    <img style="width:100px; height:100px;" src="./test.jpg" alt="some alt" /> 
    <span>lalalalalaa</span> 
</div> 

與相關的CSS：

.imgContainer span { display: none; } 
.imgContainer img:hover + span { display:inline; } 

顯然造型是需要定位的跨度，等...適用於瀏覽器，但IE6 - 顯然......

Answer 4

你應該使用懸停功能來調用鼠標和m ouse out。嘗試這個。

<script> 
$(document).ready(function() { 
    $("#secciones span").hover(function() { 
     $("#golfball img").removeClass("opaque"); 

     var imageToShow = $(this).attr("id").replace("for-", ""); 
     $("#golfball #"+imageToShow).addClass("opaque"); 

    }, 
    function(){ 
     $("#image-1").addClass("opaque"); 
    }); 
}); 
</script> 

Answer 5

jquery hover函數通常需要兩個參數：hoverIn和hoverOut。不要綁定一個mouseout事件，而是將你的「make opaque」函數傳遞給懸停綁定。

$('#secciones span').hover(
    function() { 
     $("#golfball img").removeClass("opaque"); 

     var imageToShow = $(this).attr("id").replace("for-", ""); 
     $("#golfball #"+imageToShow).addClass("opaque"); 

    }, 
    function() { 
     $("#image-1").addClass("opaque");   
    } 
); 

通過包含第二個函數，您不需要mouseout，因爲它已經由懸停函數控制。

Answer 6

HTML

<div id='secciones'> 
    <span> 
     <div id='golfball'> 
      <img src='http://kaczanowscy.pl/tomek/sites/default/files/test_result_green.png'><br /> 
      <img src='http://www.careercup.com/attributeimage?pid=microsoft-interview-questions'><br /> 
      <img src='http://img.brothersoft.com/games/flash/icon/m/math-test-3572-1264177735.jpg'> 
     </div> 
    </span> 
</div> 

腳本

$(function() { 
    $('#golfball img').each(function() { 
     $(this).css('opacity', '0.3').bind({ 
      mouseenter : function() { 
       $(this).animate({ 
        opacity : 1.0 
       }); 
       //you may add class here 
      }, 
      mouseleave : function() { 
       $(this).animate({ 
        opacity : 0.5 
       }); 
       // you may remove class here 
      } 
     }); 
    }); 
}); 

---

DEMO

---