我的 :hover 选择器被文本打断了，我该如何解决这个问题？

Question

所以我的问题是我有一个图像，当我将鼠标悬停在它上面时，盒子阴影会改变颜色。但是，当单击图像时，图像上的一些文本也会发生变化，问题是文本所在的区域阻止了我的框阴影生效。仅当我将鼠标悬停在未被文本占据的图像部分时，阴影才有效。有没有什么办法解决这一问题？另外我刚刚意识到这会影响我制作点击功能，因为文本可能会阻止我点击图片。

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;
}

Answer 1

您的文本覆盖在您的图像上，因此悬停不起作用是正常的浏览器行为。因为文本和图像不在彼此内部，而是在 DOM 中处于同一级别的元素，所以一次只能悬停一个。

当文本悬停时也应用效果的修复：

#buy2:hover,
#picklvl:hover ~ #buy2 { 
    box-shadow: 5px 5px 5px #272727;
}