Within an anchor tag, I have a div element. The CSS on the :active state is set to transform the element, but I want to avoid this behavior when focusing on the child element bx--overflow-menu. I am working with NextJS using styled-jsx and SaSS. Here is my code:
<a class="singleTile" data-cta-type="unimplemented" href="test">
<div class="bx--row">
<div class="bx--overflow-menu" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Menu" tabindex="0">
<svg focusable="false" aria-label="open and close list of options" role="img" class="bx--overflow-menu__icon">
<circle cx="8" cy="3" r="1"></circle>
<circle cx="8" cy="8" r="1"></circle>
<circle cx="8" cy="13" r="1"></circle>
<title>open and close list of options</title>
</svg>
</div>
<div class="bx--col">
<p class="name-212">cougar</p>
<p class="name-213">Version:<span class="" style="display: inline;">test.1</span></p>
</div>
</div>
</a>
The styles:
<style>
.singleTile {
flex: none;
width: 100%;
border: 1px solid #e0e0e0;
display: block;
padding: 1rem;
transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
background-color: #ffffff;
}
a.singleTile:hover {
border-color: red;
}
a.singleTile:active {
transform: scale(.994);
}
.bx--overflow-menu{
top: 0;
right: .25rem;
position: absolute;
}
</style>
I understand that achieving this effect cannot be done with just CSS, and jQuery is not permitted. Any alternative suggestions would be greatly appreciated.