<div class="block">
<div class="btn-radio">
<label>М/#000;</label>
</div>
</div>
<div class="block">
<div class="btn-radio">
<label>V/#ADFF2F;</label>
</div>
</div>
.color {
width:10px;
height:10px;
display:inline-flex;
}
.btn-radio label {
visibility: hidden;
opacity: 0;
}
.block {
width:200px;
height:200px;
border:1px solid red;
display: flex;
margin-bottom:20px;
position:relative;
}
.block:hover .btn-radio label {
visibility: visible;
opacity: 1;
left: 0;
right: 0;
z-index: 2;
}
const regex = /#[a-f\d]{3,6};?/gi;
const replacement = '<span class="color" style="background: $&;"></span>';
document.querySelectorAll(".btn-radio label").forEach(n => {
n.innerHTML = n.innerText.replace(regex, replacement);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.