如何通過點擊<a>標籤

我要上<a>標籤點擊時從懸停停止圖像從徘徊停止圖像，首先它在螢火未定義$或jQuery的錯誤，但加入如何通過點擊<a>標籤

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

後

的問題解決了，但它不工作either.and這是我的代碼：

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> 

    <script type="text/javascript"> 
    $(document).ready(function() { $("#mm").click(function() { $('#m').unbind('mouseout');});  }); 
</script> 
    </head> 





<div id="holder"> 
<ul id="menuOuter"> 
    <li class="lv1-li"> 

     <ul class="sub"> 

       <li class="sub-li p1 current"> 
    <a id="mm" class="a1" href="#url" > 



      <img id="m" src="a2.jpg" /><b>Kaf</b></a></li></ul></body>

和css：

#holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border-top:1px solid #da8; border-bottom:1px solid #da8; z-index:100;} 
    #holder table {border-collapse:collapse; margin:-1px;} 
    #holder ul {float:left; padding:0; margin:0; list-style:none;} 
    #holder ul.sub {margin-bottom:-4px;} 
    #menuOuter li a.lv1-a {background:blue; zoom:1;} 
    #menuOuter li a.lv1-a:hover {direction:ltr;} 

    #holder ul.sub {float:left;} 
    #holder ul.sub ul {position:absolute; left:-9999px; top:180px;} 
    #holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;} 

    #holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;} 
    #holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;} 
    #holder ul.sub li.sub-li a.a1 {background:#e9a358;} 
    #holder ul.sub li.sub-li a.a2 {background:#e9a358;} 
    #holder ul.sub li.sub-li a.a3 {background:#9ea64b;} 
    #holder ul.sub li.sub-li a.a4 {background:#dfb344;} 
    #holder ul.sub li.sub-li a.a5 {background:#b8826e;} 

    #menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;} 
    #menuOuter li:hover ul.sub li.current ul {left:-9999px;} 
    #menuOuter li:hover ul.sub li.current a img {left:-9999px;} 

    #menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;} 
    #menuOuter a:hover ul.sub li.current ul {left:-9999px;} 
    #menuOuter a:hover ul.sub li.current a img {left:-9999px;} 

    #holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;} 
    #holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;} 

    #holder ul.sub li.current a {margin-top:0; height:350px;} 
    #holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;} 
    #holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;} 
    #holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;} 
    #holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;} 
    #holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;} 

    #menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;} 
    #menuOuter li:hover ul.sub li.current:hover ul {left:0;} 
    #menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;} 
    #menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;} 
    #menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} 

    #menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;} 
    #menuOuter a:hover ul.sub li.current a:hover ul {left:0;} 
    #menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;} 
    #menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;} 
    #menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} 


    #holder ul.sub li {position:relative;} 

    #holder ul.sub li.sub-li:hover ul {left:0; width:130px;} 
    #holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;} 
    #holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} 
    #holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} 
    #holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;} 

    #holder ul.sub li.sub-li a:hover ul {left:0; width:130px;} 
    #holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;} 
    #holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} 
    #holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} 
    #holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;} 
    #holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;} 

    #holder ul.sub li.current ul {left:0; width:130px;} 
    #holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;} 
    #holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} 

    #holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#000; text-decoration:none; font-size:11px;} 
    #holder ul.sub li.p1 span {background:#ffe398;} 
    #holder ul.sub li.p2 span {background:#ffe398;} 
    #holder ul.sub li.p3 span {background:#dee68b;} 
    #holder ul.sub li.p4 span {background:#fff384;} 
    #holder ul.sub li.p5 span {background:#f8c2ae;}

在此先感謝。

來源

2013-06-11 jal nami

確保jQuery已加載..檢查控制檯我認爲你會得到錯誤 –

從我所瞭解的圖像懸停是由CSS，並改變這個你改變CSS和/或改變CSS動態樣式。 – Aristos

您最好在[jsfiddle]（http://jsfiddle.net/）上放置一個快速示例，以便我們可以更輕鬆地看到您正在處理的內容。目前還不清楚你的問題是什麼，並且存在大量不相關的代碼。 – johnkavanagh

您可以添加CSS屬性，你想只能用「懸停能夠」類

HTML工作：

<img id="m" class="hoverable" src="a2.jpg" />

CSS：

.hoverable:hover { 
    background-color: red; 
}

的jQuery：

$(document).ready(function() { 
    $("#mm").click(function() { 
     $('#m').removeClass('hoverable'); 
    }); 
});

編輯：使用.data(key, value)然後在.hover事件您設置數據css來代替CSS :hover

我創建如果您不能添加類，你可以得到的CSS屬性使用.css(propertyName)和存儲/值HTML5 data-*簡單的jsFiddle的例子，可以解釋我的意思 - http://jsfiddle.net/mDv2n/

這不是最佳的解決方案，但最好的發生在極限內。

來源

2013-06-11 14:06:29 Shaddow

我無法添加課程，請給我另一個想法？ –

增加了新的解決方案 – Shaddow

如何通過點擊<a>標籤

回答

相關問題