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