0
我每次点击后，给播放按钮是橙色和更改暂停/播放按钮的上方。播放和暂停按钮出现，但背景颜色覆盖播放按钮而不是暂停按钮。以下是参考图像：元素没有出现在背景色
如何按钮上显示现在：
后，我点击：
出于某种原因暂停按钮出现得很好，但在播放按钮根本不显示。这是整个HTML和CSS的工作。
$(document).ready(function() {
var icon = $('.play');
icon.click(function() {
icon.toggleClass('active');
return false;
});
});.play {
display: inline-table;
width: 0%;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 60px solid #f9f9f9;
margin: 100px auto 50px auto;
position: relative;
z-index: 20;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
left: 10px;
}
.play:before {
content: '';
position: absolute;
top: -75px;
left: -115px;
bottom: -75px;
right: -35px;
border-radius: 50%;
border: 10px solid #FB5100;
z-index: 1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
background: #FB5100;
}
.play:after {
content: '';
opacity: 0;
transition: opacity 0.6s;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.play.active {
border-color: transparent;
}
.play.active:after {
content: '';
opacity: 1;
width: 50px;
height: 80px;
/*background: #2c3e50;*/
position: absolute;
right: 13px;
top: -40px;
z-index: 555555;
border-left: 20px solid #f9f9f9;
border-right: 20px solid #f9f9f9;
box-shadow: inset 30px 0 0 0 #FB5100;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<a href="#" title="Play video" class="play"></a>
</div>
*出于某种原因，播放按钮会显示得很好，但播放按钮不会显示在所有*这是自相矛盾的。 – connexo
对不起，我的意思是暂停按钮。感谢您指出了这一点。 – Lewis
你如何加入活跃的课程？你在用JS吗？ – Deep