Question

第一次从头开始制作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%;}

Answer 1

您为左编码：

onMouseOver="changeOpacity(this, 70)"

但是你没有使用它：

onMouseOver="changeOpacity(rightButton, 70)"

Javascript在Firefox中运行，但不适用于IE，Chrome或Safari

1 个答案: