CSS：按钮可见性问题

Question

我正在使用视频播放器进行项目工作。我想添加播放/暂停和跳过按钮，但其中一个按钮总是隐形的，但工作。

在.css文件

：

.buttons { position:absolute; top: 326px; left:150px; } 
.buttons DIV { width: 26px; height: 20px; cursor: pointer; } 
.buttons .pause { background-image: url("button_pause.png"); } 
.buttons .play { background-image: url("button_play.png"); } 
.buttons .skip { background-image: url("button_skip.png"); } 

在HTML文件：

<div class="buttons"> 
    <div id="skip" onclick="skipCurrentSong();"></div> 
    <div id="playpause" onclick="setPlayPause();"></div> 
</div> 

在js文件中正常工作的功能，但跳过按钮是不可见的，我使用的代码。我试图在跳过按钮的css文件中创建一个不同的类，并相应地更新了html文件，但是这也给出了相同的输出。任何人都可以说我正在犯什么错误以及如何纠正它？

在此先感谢。

一些额外的代码：

.css文件：

@CHARSET "UTF-8"; 

BODY { height: 530px; overflow: hidden; } 

#tv { width: 532px; height: 443px; background: url("tv.png") no-repeat; margin: 0 auto; margin-top: 20px; z-index: 3; position: relative; } 
#title { color: #dddddd; text-align: right; float: right; margin-top: 320px; margin-right: 120px; } 


.buttons { position:absolute; top: 326px; left:150px; } 
.buttons DIV { width: 26px; height: 20px; cursor: pointer; background-color: white;} 
.buttons .pause { background-image: url("button_pause.png"); } 
.buttons .play { background-image: url("button_play.png"); } 
.buttons .skip { background-image: url("button_skip.png"); } 

FORM { display: block; margin: 0 auto; background: url("player.png"); height: 295px; width: 482px; clear: both; position: relative; top: -421px; margin-bottom: -295px; z-index: 4; } 
FORM LABEL { color: #00aad4; margin-bottom: 10px; padding-top: 40px; } 
FORM INPUT { border: none; border-bottom: 3px solid #00aad4; font-size: 24px; width: 200px; } 
FORM * { display: block; margin: 0 auto; text-align: center; } 
FORM .loader { margin-top: 10px; } 


.loader { background: url("load.gif"); width: 16px; height: 16px; margin: 0 auto; visibility: hidden; } 
.load .loader { visibility: visible; } 

在HTML文件：

<div id="tv"> 

    <div id="title"></div> 

    <div class="buttons"> 
     <div id="playpause" onclick="setPlayPause();"></div> 
     <div id="skip" onclick="skipCurrentSong();"></div> 
    </div> 

</div> 

Answer 1

我改变了的CSS代码：

.skipbutton { position:absolute; top:326px; left:120px; } 
.skipbutton DIV { width: 26px; height: 20px; cursor: pointer; background-color: gray;} 
.skipbutton .skip { background-image: url("button_skip.png"); } 

.buttons { position:absolute; top: 326px; left:90px; } 
.buttons DIV { width: 26px; height: 20px; cursor: pointer; } 
.buttons .pause { background-image: url("button_pause.png"); } 
.buttons .play { background-image: url("button_play.png"); } 

和改变的.html为：

<div id="tv"> 

    <div id="title"></div> 

    <div class="skipbutton"> 
     <div class="skip" onclick="skipCurrentSong();"></div> 
    </div> 

    <div class="buttons"> 
     <div id="playpause" onclick="setPlayPause();"></div> 
    </div> 

</div> 

surpyiringly for skip button div class working，而playpause按钮，div id工作和div类只是杀死按钮。这是一个有点尴尬的两个按钮在CSS文件中具有相同的结构。

我试着将两个按钮的类分开，但这次它终于起作用了。

感谢lasseespeholt。

Answer 2

更新时间：这会给你三个按钮。你想暂停/播放组合？

CSS：

.buttons { position:absolute; top: 326px; left:150px; } 
.buttons div { width: 26px; height: 20px; cursor: pointer; background-color: white;} 
.buttons #pause { background-image: url("button_pause.png"); } 
.buttons #play { background-image: url("button_play.png"); } 
.buttons #skip { background-image: url("button_skip.png"); } 

HTML：

<div id="tv"> 

    <div id="title"></div> 

    <div class="buttons"> 
     <div id="play" onclick="setPlayPause();"></div> 
     <div id="pause" onclick="setPlayPause();"></div> 
     <div id="skip" onclick="skipCurrentSong();"></div> 
    </div> 

</div>