Javascript在Firefox中工作，但不支持IE，Chrome或Safari

-1

第一次從頭開始編寫JavaScript腳本。這在Firefox中完美運行，但在Chrome或Safari中查看時，右側邊欄根本不會改變不透明度。這被設計成當鼠標懸停在邊欄div上時，它會改變該div內箭頭img的不透明度。左邊欄被設置爲相同，但改變了div和img的不透明度。Javascript在Firefox中工作，但不支持IE，Chrome或Safari

我設計的這種方式爲客戶想看看這兩個看起來像未來的哪一個決定維持之前。一旦做出這個決定，它將只是一個或另一個，所以我需要讓右邊欄固定起來！

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Giterman Designs</title>  
<link rel="stylesheet" type="text/css" href="style.css"> 


<script type="text/javascript"> 
function changeOpacity(elm, value) { 
    elm.style.opacity = (value/100); 
    elm.style.MozOpacity = (value/100); 
    elm.style.KhtmlOpacity = (value/100); 
    elm.style.filter = "alpha(opacity=" + (value) + ")"; 
    elm.style.MsFilter = " 'progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value) + ")' ";} 
</script> 

</head> 
<body> 

<!-- Left Side: Hover over Div, Div+Image shifts opacity --> 
<div id="leftNav" class="sidebar" onMouseOver="changeOpacity(this, 70)" onMouseOut="changeOpacity(this, 20)"> 
    <img src="image/leftNav.png" id="leftButton" class="arrow" alt=""></div> 

<!-- Right Side: Hover over Div, Image shifts opacity -->  
<div id="rightNav" class="sidebar2" onMouseOver="changeOpacity(rightButton, 70)" onMouseOut="changeOpacity(rightButton, 20)"> 
    <img src="image/rightNav.png" id="rightButton" class="arrow" alt=""></div> 
</body> 
</html>

和CSS

body{ 
background: url("image/bg.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} 

div#leftNav{ 
position:absolute; left:0;} 

div#rightNav{ 
position:absolute; right:0;} 

/* Left Side-bar */ 
.sidebar{ 
background:#000000; width: 55px; height: 100%; top:0; opacity:0.20;} 

/* Right Side-bar */ 
.sidebar2{ 
background: url("image/bar.png") repeat-y; width: 55px; height: 100%; top:0;} 

/* Needed to seperate arrow opacity for Right Side-bar attempt */ 
#rightButton{ 
opacity: 0.20;} 

img.arrow{ 
position: absolute; top: 50%; left: 50%; margin: 0 0 0 -35%;}

來源

2012-10-20 Ryan A.

只是評論：爲什麼不你不使用CSS'：hover'僞類嗎？你可以使用'.sidebar：hover img.arrow {opacity：0.5}'。 – VKen

如果不是因爲需要父母懸停時修改的孩子的不透明度，我會使用懸停。我沒有/不知道該怎麼做。 –

如果您不需要通過將鼠標懸停在某個div上並從另一個位置更改某個元素的CSS來執行某些操作，那麼'：hover'就完全可以做到。以下是您的代碼http://jsfiddle.net/nyt5b/的示例。您可以查看CSS部分以獲得更好的想法。將鼠標懸停在按鈕所在的左側和右側，子元素'＃rightButton'和'＃leftButton'將更改不透明度。出於性能和維護考慮：更少的代碼，更少的工作，更少的錯誤。 – VKen

左您代碼：

onMouseOver="changeOpacity(this, 70)"

但對你沒有使用這樣的：

onMouseOver="changeOpacity(rightButton, 70)"

來源

2012-10-20 01:49:44

我不確定我完全按照。正如我在聲明中所說的，左手邊的意思是讓Div和孩子的形象有不透明的變化。右側應該有它，這樣當鼠標懸停在「sidebar2」上時，它會改變「rightButton」的不透明度。但是，它只能在Firefox中工作，而不是任何其他Web瀏覽器。在Chrome，Safari和IE中，它沒有在右側的鼠標移到任何地方。 –

然後你不應該傳遞rightButton作爲參數，而不是使用getElementByID（'rightButton'）來替換rightButton在調用 –

謝謝！我想我可以通過rightButton，但我猜Chrome和Safari並不高興。 –

Javascript在Firefox中工作，但不支持IE，Chrome或Safari

回答

相關問題