0
Ich mache eine Play-Taste, die orange ist und nach jedem Klick zu einer Pause/Play-Taste wechselt. Die Wiedergabe- und Pausetaste wird angezeigt, aber die Hintergrundfarbe bedeckt die Wiedergabetaste, nicht jedoch die Pausetaste. Hier sind Bilder als Referenz:Element erscheint nicht über der Hintergrundfarbe
Wie die Taste jetzt erscheint:
Und nachdem ich auf:
Aus irgendeinem Grund die Pause-Taste erscheint nur gut, aber die Play-Taste wird überhaupt nicht angezeigt. Hier funktioniert das gesamte HTML und CSS dafür.
$(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>
* Aus irgendeinem Grund die Play-Taste erscheint nur gut, aber die Play-Taste zeigt nicht gar bis * Dies ist in sich widersprüchlich.. – connexo
Entschuldigung, ich meine die Pause-Taste. Danke, dass du darauf hingewiesen hast. – Lewis
Wie fügst du aktive Klasse hinzu? verwendest du JS? – Deep