在不同元素的悬停上显示元素

Question

我试图创建一个交互式地图，其中一组人的位置永久地显示在地图上，并且在悬停这些位置指示器时，会显示一张表，提供4条信息在那个特定的人。 我已经创建了两个元素来分别表示位置和信息表，并且现在正在尝试使其中一个元素显示在另一个元素的悬停上。下面

请参阅小提琴：

https://jsfiddle.net/8ymdmzv1/

我浏览过该网站，发现各种方法，包括改变与CSS的不透明度和显示/使用jQuery隐藏（见下文发现的建议 - 我已经复位在当前的小提琴中的元素造型），但没有喜悦。问题似乎将两个要素联系在一起，但在整整一个下午之后。

.dot:hover + .info { opacity: 1 } 
.dot:hover > .info { opacity: 1 } 
.dot:hover .info { opacity: 1 } 

$(".dot").hover(function() { 
    $('.info').show(); 
    }, function(){ 
$('.info').hide(); 
}); 

我的第一个真正的项目是为了好玩，所以我会很感激任何人帮助我通过这个障碍。

干杯！

Answer 1

在你的代码有：

// create info table 
var info = document.createElement('a'); 
info.className = 'info'; 
holder.appendChild(info); 

// create fixed dot 
var dot = document.createElement('a'); 
dot.className = 'dot'; 
holder.appendChild(dot); 

所以.info元素去之前.dot和.dot:hover + .info选择不worknig。 它的工作原理，如果你可以重新排列元素，以这样的：

// create fixed dot 
var dot = document.createElement('a'); 
dot.className = 'dot'; 
holder.appendChild(dot); 

// create info table 
var info = document.createElement('a'); 
info.className = 'info'; 
holder.appendChild(info); 

这可能是更好地隐藏在你的情况display财产/节目内容。所以，你可以在你的CSS做这样的事情：

.info { display: none; } /* Hide .info by default */ 
.dot:hover + .info { display: block; } /* Show .info, if .dot hovered */ 
.info:hover { display: block; } /* And stays visible, while .info hovered itself */