Question

我有5个具有唯一ID的可点击圈子，每个圈子都有不同的工具提示文字。所有文本都从xml数据接口读取。

    jQuery(function ($) {
    $.ajax({
        type: "GET",
        url: 'steel_agg_bof_flash_en.xml',
        dataType: "xml",
        success: xmlParser
      });
      function xmlParser(xml) {

          $(xml).find("hotspot").each(function () {
            var position   =  $(this).find('position').text();
            var arr        =  position.split(",");
            var hotspotid  =  $(this).find('hsid').text();
            var title      =  $(this).find('title').text();

            $('#clickAreas').prepend('<div id="'+ hotspotid +'_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: ' + arr[1] + 'px' + '; left: ' + arr[0] + 'px' +'; width: ' + Math.floor(arr[2]/3.28148) + 'px; height: '+ Math.floor(arr[2]/3.28148) + 'px; border-radius: 100%; cursor: pointer; opacity: 0.5;"><div class="tooltip"><p style="color: #ffffff;"> ' + title + '</p></div></div>');
          });

        } 

    });

和html输出如下所示 - http://jsfiddle.net/HJf8q/1860/

javascript我后来添加了一些css部分，因为我试图执行以下操作：

当悬停在圆形工具提示时应出现淡入淡出效果，然后当将鼠标移到圆圈外时，工具提示应在淡入淡出效果中消失。（我尝试用一个圆圈来做这个，但正如你所看到的，当把鼠标移到圆圈外面而不是慢慢消失时，请看看会发生什么 - http://jsfiddle.net/HJf8q/1851/），
我无法正确处理一个圆圈，因为你可以看到问题是什么，特别是对于更多的圆圈来显示相应的工具提示文字取决于我所悬停的圆圈，因为现在它会影响所有圈子......我不知道，请帮帮我

Answer 1

您必须使用CSS过渡并使用工具提示的不透明度来实现淡入淡出效果。这是一个关于如何做的小例子：

var tooltips = document.querySelectorAll('.clickMapItem .tooltip');

var items = document.querySelectorAll('.clickMapItem').forEach(function(el) {
    el.addEventListener('mousemove', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 1;

            if (typeof tooltip !== "undefined") {
                var x = (e.clientX - 10) + 'px',
                    y = (e.clientY - 70) + 'px';

                tooltip.style.top = y;
                tooltip.style.left = x;
            }
        }
    });

    el.addEventListener('mouseout', function(e) {
        if (e.target == this) {
            var tooltip = e.target.querySelectorAll('.tooltip')[0];
            tooltip.style.opacity = 0;
        }
    });
});

body {
  background: grey;
}

.clickMapItem {
    background: #004593;
    /*position: absolute;
    top: 100px;
    left: 100px;*/
    width: 135px;
    height: 135px;
    border-radius: 100%;
    cursor: pointer;
    opacity: 0.5; 
    transition: all 0.5s ease;    
    margin: 30px;
}

.clickMapItem:hover {
    background: #004593;
    opacity: 0.8;

}
.clickMapItem .tooltip {
    /*display:none;*/
    opacity: 0;
    display:block;
    position:fixed;
    overflow:hidden;
    background: black;
    color: white; 
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
   
}
/*.clickMapItem:hover .tooltip {
    opacity: 1;
}*/

/*.clickMapItem:hover .tooltip:before {
  content: ' ';
  position: absolute;
  width: 0px;
  height: 0px;
  left: 38px;
  top: 10px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}*/

<div id="clickMapItem_1" class="clickMapItem">
    <div class="tooltip">
        <p>Tooltip Text</p>
    </div>
</div>


<div id="clickMapItem_2" class="clickMapItem">
    <div class="tooltip">
        <p>One more ytoolytip here</p>
    </div>
</div>

此外，您不应使用全局窗口事件来执行此类特定元素任务。直接向元素添加事件侦听器，并避免在窗口中全局执行它。

<强>更新

为了修复即使鼠标悬停在工具提示本身时显示的工具提示，您也需要使用javascript事件mousemove和mouseout进行整个悬停处理。这是因为我们不能排除子元素在CSS级别接收mousemove事件，但使用javascript我们可以过滤它们。检查我的更新代码，看看它是否按预期工作。

Answer 2

好吧，我设法这样做了

jsfiddle.net/HJf8q/1868 /

但我必须做一些修复，例如在悬停时添加不透明度并在mousemove上转换

根据我悬停的圆圈显示相应的工具提示文本

2 个答案: