The code includes an <a href> element that wraps around two div elements. One of the divs is only displayed when the link is clicked, and it appears above the other div. This setup serves as a visual feedback mechanism for user interaction.
To see and test this in action, visit: https://jsfiddle.net/pjgdtade/2/
a {
text-decoration: none;
display: flex;
position: relative;
width: 328px;
}
div.tile {
position: relative;
padding: 12px 10px;
box-sizing: border-box;
background-color: white;
color: black;
display: block;
width: 328px;
margin: 0;
box-shadow: 1px 2px 4px 0 #e0e0e0;
border: solid 1px #dcdcdc;
}
div.link-active-cover {
background: rgba(220, 220, 220, 0.6);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
}
a:active div.link-active-cover {
display: block;
}<a href="https://www.google.de" target="_blank">
<div class="tile">
This is some content in a clickable box.
</div>
<div class="link-active-cover"></div>
</a>In Chrome browser, everything functions correctly as intended. However, in Firefox, clicking on the link does not trigger its execution. The div.link-active-cover displays upon click, but the new page fails to open.
An interesting observation is that if the div.link-active-cover is initially visible (no display: none), both the div shows up and the link works properly.
Is there something wrong with my implementation or could this be a bug specific to Firefox?