区域 onmouseover 光标外观

Question

我有一张设置了 area 标签的地图，我想为此设置一个 onmouseover 事件，更改光标的外观以告诉用户它是可点击的。但是，使用 safari 时出现问题：

在 area 标签中使用 onmouseover="style.cursor = 'pointer';" 似乎不起作用。通常不会，因为它在悬停时会完全触发其他事情。 Safari 还允许我使用其他方式更改它的外观，但使用这种组合它不会...

<div class="desktop"> <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> <map name="desktop"> <area shape="rect" coords="2057.143,0,2742.857,960" onmouseover="style.cursor = 'pointer';" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();"> </map> </div>

Answer 1

Safari 并不总是支持当今其他浏览器所支持的“一般”功能。但是，我还是很难相信他们不支持 onmouseover 事件，所以可能是其余代码导致了它无法正常工作的问题。

如果真的想使用 javascript 为指针应用样式，请尝试使其更具体，如下所示： onmouseover="this.style.cursor='pointer';"

但是为什么要添加样式时使用 JavaScript？仅 CSS 就足够了，只需将其放在您的样式表中，您就可以删除整个内联 onmouseover:

.desktop area:hover{
   cursor: pointer;
}

或者使用一个空 href="#" 这样浏览器就会看到它是一个 link 并且它默认显示指针。

这是一个例子。当然，请确保您的坐标也在图像中！

img {
  width: 100px;
  height: 100px;
  border: solid 1px black;
}

<div class="desktop"> 
  <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> 
  <map name="desktop"> 
    <!-- Coords are from left uper corner (10px on the x and y axis) to the right bottom corner (90px on the x and y axis) -->
    <area shape="rect" coords="10,10,90,90" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();" href="#"> 
  </map> 
</div>

区域 onmouseover 光标外观

area onmouseover cursor appearance

html

javascript

onmouseover