jQuery的「懸停」功能不能在Firefox上<area>標籤

說明我的代碼工作：jQuery的「懸停」功能不能在Firefox上<area>標籤

我有3倍的圖像，都在不斷滾動左側。當圖像變得太離譜時，它會再次放置到右側，創建一個很好的過渡效果。

使用標籤映射圖像，並且當您將鼠標懸停在圖像上時，滾動停止，並且在圖像的特定區域出現彈出窗口。

在Chrome和Safari中可以使用，但在FireFox中，懸停功能不會註冊標籤。我該怎麼辦？

這裏是我的代碼：

var custom_style = 'night'; // set this to day or night, and then set_style to "true" to activate it 
var set_style = true; // When this is false, it uses your computer's time 
var speed = 2; // number of pixels moved left every 50 milliseconds 

paused = false; 
area = null; 
$(document).ready(function() { 
    var date = new Date(); 
    var style = "day" 
    if (date.getHours() >= 17 || date.getHours() <= 5 || (set_style && custom_style == 'night')){ 
     style="night"; 
     $('#day_sign2').hide(); 
     $('#night_sign').show(); 
     $('.customarea').addClass('customareaNight'); 
    }else{ 
     $('#container').css('backgroundImage', '0 !important'); 
     $('#container').addClass('night_container'); 
    } 
    setInterval(wells_fancy_slider, 50); 
    $('area').css('z-index', '5000'); 
    t = null; 

    $('area').hover(function() { // this is not registering in FF 
     $('.customarea').hide(); 
     paused = true; 
     area = $(this).attr('id'); 
     $('.custom' + area).show(); 
     alert(area); 
     console.log('.custom' + area); 
     t = setTimeout(custom_mouseover, 5000); 
    }, function() { 
     setTimeout(function() { 
      $('.customarea').hide(); 
      paused = false; 
     }, 2500) 
    }); 

    if (style == 'day'){ 
     $('#container').css('background-color', 'white'); 
     $('.night').hide(); 
    }else{ 
     $('.day').hide(); 
    } 

}) 

function custom_mouseover() { 
    clearInterval(t) 
} 

function wells_fancy_slider() { 
    if (!paused) { 
     if (parseInt($('.pic1').css('left')) < -2770) { 
      $('.pic1').css('left', '5586'); 
     } 
     if (parseInt($('.pic2').css('left')) < -2770) { 
      $('.pic2').css('left', '5586'); 
     } 
     if (parseInt($('.pic3').css('left')) < -2770) { 
      $('.pic3').css('left', '5586'); 
     } 
     $('.pic1, .pic2, .pic3').css('left', '-=' + speed); 
    } 
}

和HTML：

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="wells_slider.css"> 
     <script type="text/javascript" src="wells_slider.js"></script> 
    </head> 
    <body> 
     <div style="position:absolute; width: 15%; z-index: 2000; float: left; height: 100%; left:0px; background-color:black;"></div> 
     <div style="position:absolute; width: 15%; z-index: 2000; float: right; height: 100%; right:0px; background-color:black;"></div> 

     <div id="container"> 
      <div style="width: 100%;margin-left: auto;margin-right: auto;position: relative;height: 50px;"> 
       <img id="day_sign" src="img/day_sign.png" /> 
       <img id="day_sign2" src="img/day_sign2.png" /> 
       <img id="night_sign" src="img/night_sign.png" style="display:none;" /> 
      </div> 
      <div id="pic_container"> 
       <img class="pic1 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" /> 
       <img class="pic2 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" /> 
       <img class="pic3 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" /> 

       <img class="pic1 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" /> 
       <img class="pic2 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" /> 
       <img class="pic3 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" /> 

       <map id="img_map" name="img_map"> 
        <area id="area1" shape="rect" coords="3,69,413,445" alt="1" title="1" /> 
        <area id="area2" shape="rect" coords="413,73,692,443" alt="2" title="2" /> 
        <area id="area3" shape="rect" coords="692,91,919,440" alt="3" title="3" /> 
        <area id="area4" shape="rect" coords="917,102,1135,440" alt="4" title="4" /> 
        <area id="area5" shape="rect" coords="1134,103,1363,441" alt="5" title="5" /> 
        <area id="area6" shape="rect" coords="1360,107,1591,438" alt="6" title="6" /> 
        <area id="area7" shape="rect" coords="1589,96,1872,438" alt="7" title="7" /> 
        <area id="area8" shape="rect" coords="1871,100,2072,439" alt="8" title="8" /> 
        <area id="area9" shape="rect" coords="2072,116,2272,436" alt="9" title="9" /> 
        <area id="area10" shape="rect" coords="2270,70,2597,433" alt="10" title="10" /> 
        <area id="area11" shape="rect" coords="2595,78,2784,430" alt="11" title="11" /> 
       </map> 
       <div class="p_container popup_container1 pic1"> 
        <a href="http://www.wellsjohnston.com"><div class="customarea customarea1" > 
          Some Text 
         </div></a> 
        <div class="customarea customarea2" style="left:400px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea3" style="left:690px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea4" style="left:912px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea5" style="left:1132px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea6" style="left:1357px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea7" style="left:1585px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea8" style="left:1870px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea9" style="left:2070px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea10" style="left:2265px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea11" style="left:2595px;"> 
         Some Text 
        </div> 
       </div> 
       <div class="p_container popup_container2 pic2"> 
        <div class="customarea customarea1" > 
         Some Text 
        </div> 
        <div class="customarea customarea2" style="left:400px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea3" style="left:690px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea4" style="left:917px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea5" style="left:1132px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea6" style="left:1357px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea7" style="left:1585px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea8" style="left:1870px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea9" style="left:2070px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea10" style="left:2265px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea11" style="left:2595px;"> 
         Some Text 
        </div> 
       </div> 
       <div class="p_container popup_container3 pic3"> 
        <div class="customarea customarea1" > 
         Some Text 
        </div> 
        <div class="customarea customarea2" style="left:400px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea3" style="left:690px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea4" style="left:917px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea5" style="left:1132px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea6" style="left:1357px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea7" style="left:1585px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea8" style="left:1870px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea9" style="left:2070px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea10" style="left:2265px;"> 
         Some Text 
        </div> 
        <div class="customarea customarea11" style="left:2595px;"> 
         Some Text 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-11-22 The Puma

您可以使用jsfiddle.net重新創建問題或提供指向您網站的鏈接？ –

它沒有託管，我不能讓它在jsfiddle上看起來不錯，但我可以通過電子郵件向您發送包含所有內容的zip文件。還是有在線臨時存儲很容易？ –

也許它不喜歡與'區域'標記進行交互。嘗試爲每個區域標記添加一個類，並將類名放入jQuery中，而不是「區域」。 –

我想我已經想通了。

在您的圖片標籤上，您需要在地圖名稱前放置哈希標籤。

<img class="pic1 day" src="img/LMday.png" usemap="#img_map" border="0" width="2798" height="450" alt="" />

來源

2012-11-22 23:23:19

jQuery的「懸停」功能不能在Firefox上<area>標籤

回答

相關問題