1

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

我为此使用 jquery+imagemapster，每个公寓都是地图上的一个区域，到目前为止效果很好。问题是客户端希望工具提示是透明的，当我在 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,
4

1 回答 1

1

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

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

于 2012-12-19T21:12:05.197 回答