0
180
ViewsHover on element within anchor tag without selecting anchor tag. JS or CSS
I am working on a Shopify theme where I need to select the product price & hover on it for tooltip. but the problem is those products all are within an anchor tag. I've tried to find a solution but there's not much info about it. Tried pointer-event: none; but this causes anchor not working anymore. I need the anchor tag to work & at the same time, I need the hover effect on price without selecting the anchor tag because that anchor tag is within a theme & selecting that will cause problems for different themes. SO I've made a Codepen simulation for it. check below & let me know if it is possible with CSS or js doesn't matter. Thank you.
I want to hover this box
a {
font-family: sans-serif;
text-decoration: none;
color: black;
}
.card {
width: 400px;
margin: 20px auto;
background: white;
box-shadow: 0 0 5px 2px #999;
border-radius: 4px;
padding: 10px;
text-align: center;
}
.card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.price-group {
margin: 20px 0 5px;
padding: 20px 0;
background: #ddd;
}<a href="">
<div class="card">
<img src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi, alias.
</p>
<div class="price-group">
<span class="title">Sample Product</span>
<span class="price">$100</span>
</div>
</div>
</a>1 answers
Answer question0
If I understand correctly, you are looking to be able to click the price without triggering the anchor, while not losing the functionality of the anchor.
This can be done with use stopPropagation and preventDefault
You can sort of 'mask' the hovering of anchor, by overwriting the hover actions of anchor.(bad UX though)
function check(event) {
// prevent acheck or other functions of anchor
event.stopPropagation();
// stops href redirection
event.preventDefault();
console.log('inner')
}
function acheck(event) {
console.log('anchor')
}a {
font-family: sans-serif;
text-decoration: none;
color: black;
}
.card {
width: 400px;
margin: 20px auto;
background: white;
box-shadow: 0 0 5px 2px #999;
border-radius: 4px;
padding: 10px;
text-align: center;
}
.card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.price-group {
margin: 20px 0 5px;
padding: 20px 0;
background: #ddd;
}
.price-group:hover {
background: red;
cursor: pointer;
}
a:hover {
cursor: default;
}<a href="">
<div class="card" onclick='acheck(event)'>
<img src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi, alias.
</p>
<div class="price-group" onclick='check(event)'>
<span class="title">Sample Product</span>
<span class="price">$100</span>
</div>
</div>
</a>