-1

第一次从头开始制作 Javascript 脚本。这在 Firefox 中完美运行，但在 Chrome 或 Safari 中查看时，右侧边栏根本不会改变不透明度。这样做的目的是当鼠标悬停在侧边栏 div 上时，它会更改该 div 中箭头 img 的不透明度。左侧边栏设置为相同，但更改了 div 和 img 的不透明度。

我这样设计它是因为客户想在决定保留哪一个之前先看看两者的外观。一旦做出决定，它将只是一个或另一个，所以我需要修复右侧的侧边栏！

<!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%;}
4

1 回答 1

0

你为左编码：

onMouseOver="changeOpacity(this, 70)"

但是对于正确的你没有使用这个：

onMouseOver="changeOpacity(rightButton, 70)"
于 2012-10-20T01:49:44.863 回答