I just redid all my playbuttons and gave them all parents. But now I see it’s not always necessary. How do you know when to use a parent, and when not to use one?
Relative can just be put on .playButton2, and it doesn’t need to be put inside a parent, correct?
Example:
<style>
.wrap {
position: relative;
display: table;
}
.playButton2 {
width: 260px;
height: 260px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
border: 3px solid #0059dd;
}
.playButton2.playing {
border: 3px solid #e77d19;
background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
}
.initial2,
.pause2,
.play2,
.speaker2 {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.initial2 {
stroke: #e77d19;
stroke-width: 3px;
color: black;
}
.pause2,
.play2 {
stroke: #e77d19;
stroke-width: 3px;
fill: transparent;
display: none;
}
.speaker2 {
fill: #1ed760;
fill-rule: evenodd;
display: none;
}
</style>
<div class="wrap">
<div class="playButton2">
<svg class="initial2" width="90" height="108" viewbox="0 -10 85 120">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
<svg class="pause2" width="90" height="108" viewbox="-13 -10 85 120">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
<svg class="speaker2" width="60" height="72" viewbox="0 0 16 14">
<path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"></path>
</svg>
<svg class="play2" width="90" height="108" viewbox="0 -10 85 120">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</div>
</div>
<audio id="player2" preload="none">
<source src="" type="audio/mpeg">
</source>
</audio>
<script>
(function iife() {
"use strict";
function playButtonClickHandler() {
var button = document.querySelector(".playButton2");
var player = document.querySelector("#player2");
document.querySelector(".playButton2 .initial2").style.display = "none";
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton2 .play2").style.display = "none";
document.querySelector(".playButton2 .pause2").style.display = "inline-block";
player.play();
} else {
document.querySelector(".playButton2 .pause2").style.display = "none";
document.querySelector(".playButton2 .play2").style.display = "inline-block";
player.pause();
}
}
function playButtonMouseoverHandler() {
var player = document.querySelector("#player2");
player.isPlaying = function isPaused() {
return player.paused === false;
};
if (player.isPlaying()) {
document.querySelector(".playButton2 .speaker2").style.display = "none";
document.querySelector(".playButton2 .pause2").style.display = "inline-block";
}
}
function playButtonMouseoutHandler() {
var player = document.querySelector("#player2");
player.isPlaying = function isPlaying() {
return player.paused === false;
};
if (player.isPlaying()) {
document.querySelector(".playButton2 .pause2").style.display = "none";
document.querySelector(".playButton2 .speaker2").style.display = "inline-block";
}
}
var playButton = document.querySelector(".playButton2");
playButton.addEventListener("click", playButtonClickHandler);
playButton.addEventListener("mouseover", playButtonMouseoverHandler);
playButton.addEventListener("mouseout", playButtonMouseoutHandler);
}());
</script>