我的：悬停选择器被文本中断，我该如何解决这个问题？

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