JavaScript mouseover/mouseleave在某些瀏覽器上導致閃爍（IE和FF）

Question

我在設計網站時遇到問題。不幸的是，我陷入了不是爲Internet Explorer設計它的陷阱，而是陷入了一個更友好的瀏覽器，比如Chrome。現在我在IE中看到它，我發現了一個讓我有點傻的問題。

菜單鏈接這裏 -

http://mydomain.com/apassociates/page/home

...閃爍和崩潰。如果你想看看它應該是什麼樣子，請在Chrome中查看。

我不是一個專業的網絡開發人員，我懷疑這些問題對於更有經驗的開發人員來說可能是初級的，但我並不確定從哪裏開始。

有沒有人有任何想法或指針爲這個問題？

---

所以要儘量的幫助，這個重點按照從意見的建議，這裏的HTML的

<div id='home-pictures'> 

    <a href='http://mydomain.com/apassociates/page/conservatory'> 
     <div id='home-1'> 
      <span class='home-link'>Traditional</span> 
     </div> 
    </a> 
    <a href='http://mydomain.com/apassociates/page/blackbrookhouse'> 
     <div id='home-2'> 
      <span class='home-link'>Commercial</span> 
     </div> 
    </a> 
    <a href='http://mydomain.com/apassociates/page/floodproof'> 
     <div id='home-3'> 
      <span class='home-link'>Innovative</span> 
     </div> 
    </a> 
</div> 

這裏的JavaScript中，作品以取代在mouseover-

// home links 
$('div#home-1').mouseover(function() { 
    $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption-wash.png)'); 
}); 

$('div#home-1').mouseleave(function() { 
    $('div#home-1').css('background-image', 'url(/apassociates/images/content/devonhouse-caption.png)'); 
}); 

背景圖像

我只包括第一個鏈接的代碼，其他代碼只是這些與不同身份標籤的重複。

我還在想我是否會更好地將每個鏈接放入其固定維度的div中。可能防止崩潰/閃爍？

Answer 1

我設法隔離您的問題並在this fiddle中解決它。

HTML：

<div id="home-pictures"> 
    <a href="http://mikloswe.nextmp.net/apassociates/page/conservatory"> 
     <div id="home-1" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/devonhouse-caption.png);"> 
      <span class="home-link">Traditional</span> 
     </div> 
    </a> 
    <a href="http://mikloswe.nextmp.net/apassociates/page/blackbrookhouse"> 
     <div id="home-2" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/carehome-caption.png);"> 
      <span class="home-link">Commercial</span> 
     </div> 
    </a> 
    <a href="http://mikloswe.nextmp.net/apassociates/page/floodproof"> 
     <div id="home-3" style="background-image: url(http://mikloswe.nextmp.net/apassociates/images/content/submersible-caption.png);"> 
      <span class="home-link">Innovative</span> 
     </div> 
    </a> 
</div> 

CSS：

#home-pictures { 
    height: 250px; 
} 
#home-pictures { 
    text-align: center; 
} 
#home-pictures a:link, 
#home-pictures a:visited { 
    color: #B43104; 
    display: block; 
    text-decoration: none; 
} 
#home-1, #home-2, #home-3 { 
    margin-left: 20px; 
    float: left; 
    height: 256px; 
    width: 285px; 
    zoom: 1; 
} 
.home-link { 
    color: #B43104; 
    display: block; 
    float: left; 
    font-family: 'book antiqua', palatino, serif; 
    font-size: 24px; 
    margin-left: 15px; 
    position: relative; 
    top: 220px; 
} 

的JavaScript：

// home links 
$('div#home-1, div#home-2, div#home-3').mouseenter(function() { 
    $(this).css({ 
     'filter' : 'alpha(opacity=50)', 
     'opacity' : '0.5' 
    }); 
}).mouseleave(function() { 
    $(this).css({ 
     'filter' : 'alpha(opacity=100)', 
     'opacity' : '1.0' 
    }); 
}); 

我改變的JavaScript，以便它不依賴於圖像的懸停，但不透明度。這會影響圖像下方的字體，因爲它也在div內，但是也許你可以在每個圖像中都有專門的div（如'div.image'），並將背景設置爲只對圖像不透明，而不是整體item ...

更新：

不透明度可能會對IE很棘手。更新了CSS和JavaScript，以便它可以在IE上使用...小提琴也進行了更新。跨瀏覽器的不透明度取自this post，我一直回來...