CSS如何用于修剪鼠标悬停区域？

问题描述

| 我从现有的CSS映射中获取了一些代码，下面的部分令人困惑，因为我认为这与使翻转区域（california1）比简单的Box更定义有关。 我的问题：一个人如何自己写这个，为什么要使用em而不是像素？ 示例代码：

#california1 .s1{height:.3em;left:14em;top:12.7em;width:.2em} 
#california1 .s2{height:.5em;left:13.8em;top:12.6em;width:.2em} 
#california1 .s3{height:.7em;left:13.7em;top:12.5em;width:.1em} 
#california1 .s4{height:.8em;left:13.6em;top:12.4em;width:.1em} 
#california1 .s5{height:.9em;left:13.5em;top:12.3em;width:.1em} 
#california1 .s6{height:1em;left:13.4em;top:12.2em;width:.1em} 

    

解决方法

因此，要回答您的第一个问题，自己编写将非常简单-我是在HTML上下文之外查看此内容，但我想每个\ .s1，.s2等div只是\地图的“段\”。 EM与像素相对应，因为在调整窗口大小或在电话浏览器中查看网站等时，缩放比例要比像素好。     ,ѭ1相对于

font-size

属性。

1em

等于当前元素

font-size

。 如果您使用的是静态图片，请尝试增加浏览器的文本大小，以确保您的细分会不断增长，不再适合地图。 您是说要对其进行更多定义，希望您使用

map

和

area

HTML元素来定义可点击部分。使用具有“ 7”字形的区域坐标来最好地定义加利福尼亚的每个部分：

<map name=\"california\">
    <area shape=\"poly\" coords=\"x1,y1,x2,y2,... xn,yn\" href=\"s1.html\" alt=\"segment 1\">
    <area shape=\"poly\" coords=\"...\" href=\"s2.html\" alt=\"segment 2\">
    ...
    <area shape=\"poly\" coords=\"...\" href=\"sn.html\" alt=\"segment n\">
</map>

然后使用

usemap

将其分配给您的图像：

<image usemap=\"#california\" ... />

这里有一个例子。 我不知道它是否太明显，我只是希望它能有所帮助。