html - 我的 :hover selector is interrupted by text, 我该如何解决这个问题？

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