使用 CSS 设置 <area> HTML 标记的样式不起作用答案

【问题标题】：Styling <area> HTML tag using CSS not working使用 CSS 设置 <area> HTML 标记的样式不起作用
【发布时间】：2014-01-12 16:50:37
【问题描述】：

我有这个工作示例：jsFiddle。

通过在输入字段中键入“a”，选定的区域标签将获得另一个不透明度：

$( "area[data-name^='" + input + "']" ).css( "opacity" , ".25" )

但问题是，即使 jQuery 代码正确执行，也没有发生视觉效果？

有人可以帮忙在区域标签上获得视觉效果吗？？

【问题讨论】：

我不确定您要做什么。您是否希望将图像的四分之一变成半透明？这根本不是地图的用途，它们不能做你想做的事情。
有什么解决办法吗？
只是为了使该区域看起来不同，例如透明度，灰度？？有没有办法通过 jquery 为每个区域和样式添加一个类？
不，不，没有。这不是<area> 的用途。你不能用它来应用样式，它是这个工作的错误工具。考虑使用四个<a> 标签，每个标签都设置为使用该图像作为背景，但锚定以便它们拼接在一起。然后你可以独立调整它们的不透明度。
我在该区域周围使用列表标签的另一种方式：jsfiddle.net/fDavN/8443 但仍然没有视觉效果，有人可以帮助我吗？

【解决方案1】：

area 标签只是定义了用户可以点击的空间，没有可视化的表示，所以你不能直接使用 CSS 来设置它的样式。

您可能希望使用 JavaScript 在图像映射的顶部覆盖透明图像以完成您想要做的事情：

【讨论】：

我可能有一个解决方法：jsfiddle.net/fDavN/8443，但仍然没有视觉效果？可以参考一下吗？
不确定您的意思？
当我在输入字段中输入“a”时，带有 data-name="abc" 的列表元素应该得到不同的不透明度，但它没有，你知道为什么吗？跨度>
总有办法，但只要我完全不确定你在做什么，就很难说。此外，我为您列出了要点并提供了替代解决方案 - 显然这些对您不利？
你的解决方案不是我想要的解决方案：/对不起。看看我的例子：jsfiddle.net/fDavN/8468，现在你明白我想做什么了。如果输入与其中一个数据名称匹配，则它的区域应该获得另一个不透明度/灰度。但目前没有视觉效果。可以直接参考这个例子吗？