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

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

1 个答案: