-1
我想在用戶點擊中間DIV（藍色）時使用左右DIV提供滑動效果。但它不起作用。無法在DIV上使用JavaScript執行CSS代碼
腳本代碼不起作用。我認爲有一些錯誤。
當我在樣式表中使用懸停時，它也無法工作。我的意思是我用鼠標懸停id id inner/outer/power，這會改變左右id的css屬性來創建滑動過渡效果。但它沒有奏效。但是當我用容器來代替上面的id時，滑動效果就起作用了。我完全鬱悶，因爲它對我沒有任何意義。
<script type="text/javascript" >
\t function slide()
\t {
\t \t document.getElementById("left").style.left = -100% ;
\t \t document.getElementById("right").style.right = -100% ;
\t }
</script>html,body{
\t height: 100%;
\t width: 100%;
\t margin: 0;
max-width: 100%;
overflow-x: hidden;
}
#container {
\t height: 100%;
\t width: 100%;
\t margin: 0;
\t position: absolute;
}
#left {
\t left: 0px;
\t margin-left: 0%;
\t position: absolute;
\t height: 100%;
\t width: 50%;
\t background-color: yellow;
\t transition: left ease-out 3s;
\t
}
#right {
\t right: 0px;
\t margin-left: 50%;
\t position: absolute;
\t height: 100%;
\t width: 50%;
\t background-color: green;
\t transition: right ease-out 3s;
}
#outer{
\t z-index: 5;
\t margin-left: 47.5%;
margin-top: 25%;
\t width: 5%;
\t position: absolute;
}
#inner {
\t z-index: 5;
\t width: 100%;
\t height: 100%;
\t padding-bottom: 100%;
border-radius: 50%;
background-color: blue;
}
#power {
\t z-index: 5;
\t position: absolute;
\t width: 100%;
\t height: 100%;
\t
}<html>
<head>
\t <link rel="stylesheet" type="text/css" href="design.css">
\t <title></title>
</head>
<body>
<div id="container">
\t <div id="outer">
\t <div id="inner" >
\t <a href="javascript:slide()">
\t \t <img id="power" src="off.png">
\t </a>
\t </div>
\t </div>
\t <div id="left"></div>
\t <div id="right"></div>
</div>
</body>
</html>
'style.left = -100％' - 這是錯誤的（我會相當驚訝，如果這不會產生在控制檯JS錯誤消息） - 它必須是一個字符串值，'style.left =「-100％」' – CBroe
感謝您的幫助CBroe！ – Veloxigami