핫스팟 상단의 텍스트는 핫스팟이 응답하지 못하도록합니다.

Question

배경 이미지가있는 웹 페이지를 만들고 있습니다. 이 위에 CD 반투명 이미지 (불투명도 0.2)가 있고 Dreamweaver를 사용하여 CD 이미지 주변에 핫스팟을 만든 다음 링크를 추가하면 모두 잘 작동합니다. 다음으로 나는 CD 이미지의 중앙에 텍스트를 추가했는데 이미지 중앙에 텍스트를 마우스로 올리면 핫스팟이 응답하지 않습니다. 나는 여기에서 볼 수있는 페이지의 왼쪽 아래에있는 CD 이미지에서 작업하고있다 http://lawenforcementspanish.com/chris/index3.php.

어떤 방향으로도 제공해 주셔서 감사합니다.

Answer 1

<div class="homePageCd fltlft"> 
    <div class="text_over_image">Hear my<br>music</div> 
<img src="images/CDimage.png" usemap="#Map" style="opacity:0.2" border="0"> 
<map name="Map" id="Map"> 
    <area shape="circle" coords="129,129,124" href="discography.php"> 
</map> 

</div> 

텍스트가 포함 된 div에는 이미지와 앵커가 겹칩니다.

당신은 당신의 HTML 마크 업에 img 전에 배치하여 이미지 뒤에 text_over_image를 이동할 수 img

Answer 2

이전 <div class="text_over_image">Hear my<br>music</div>을 넣어. 그러나 텍스트를 실제로 맨 위에 두려면 pointer-event:none을 사용하여 요소를 숨기고 이벤트를 숨기도록 숨기십시오.

단순히 CSS에 추가 :

.text_over_image { 
    pointer-events: none; 
} 

그러나, 그것은 CSS Pointer Events isn't well supported in old browsers 있음을 주목할 필요가있다.