javascript - imagemapster不透明度

Question

我正在做一个元素，用户可以将鼠标悬停在不同的公寓上，并在每个区域旁边的工具提示框中查看价格等信息。

为此，我正在使用 jquery+imagemapster，其中每个公寓都是 map 上的一个区域，到目前为止效果很好。问题是客户希望工具提示是透明的，当我在 div 样式中设置“不透明度”时没有任何反应，我尝试了所有主流浏览器。 CSS 的其余部分效果很好，不透明度适用于常规 div，但不适用于工具提示。如何设置工具提示的不透明度？

我的 javascript 看起来像这样:

var image = $('#apartments1');
            image.mapster({
            toolTipClose: ["area-mouseout"],
            toolTipContainer: '<div style="border: 1px solid #ee6622; background: #FFFFFF; 
font-family:Arial; position:absolute; width:160px; padding:4px; margin: 4px;
 -moz-box-shadow: 0px 0px 7px #cc5511; ' + ' -webkit-box-shadow: 0px 0px 7px #cc5511; 
box-shadow: 0px 0px 7px #cc5511; -moz-border-radius: 6px 6px 6px 6px; 
-webkit-border-radius: 6px; ' +'border-radius: 6px 6px 6px 6px; opacity: 0.1;"></div>',
            clickNavigate: true,

Answer 1

我为您构建了一个小演示 (jsFiddle)。我刚刚复制了容器的 html 和 css。在这种情况下，不透明度有效，但您也可以看到将工具提示的不透明度设置为 10% 的问题:文本也将全部为 10%。要更改此设置，请使用 png 作为背景或使用两个彼此独立的 div 来获得效果。

顺便说一句:我会插入一个带有 id 的 div，然后在 css 文件中设置 div 的样式。并且 opacity: 0.1; 非常低，可能您看不到它。