My : 호버 선택기가 텍스트로 중단되었습니다. 어떻게 해결할 수 있습니까?

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

을