My issue revolves around an image with a hover effect that changes the box shadow color. However, there is text on the image that also changes when clicked, creating a problem where the area occupied by the text prevents the box shadow from displaying properly. This means the shadow only works when hovering over a part of the image not covered by text. Is there a way to resolve this issue? Additionally, I just realized that this may impact click functionality as well, since the text could obstruct clicking on the image.
HTML:
//The next pickaxe price
<p id="picklvl">Upgrade Pickaxe $<span id="picklvlc">5000</span></p>
//My location for my img
<img id="buy2" src="img/buy2.png">
CSS:
// Text that displays price of next pickaxe
#picklvl {
z-index: 100;
position: absolute;
font-family: fantasy;
top: 52%;
left: 55px;
font-size: 15px;
width: 130px;
}
// Gives location + shadow to my buy2 image
#buy2 {
position: absolute;
top: 60%;
left: 13px;
box-shadow: 5px 5px 5px black;
border: 1px solid;
border-radius: 5px;
z-index: -1;
}
// When I hover over buy2, shadow changes color
#buy2:hover {
box-shadow: 5px 5px 5px #272727;
}