在不同元素的懸停上顯示元素

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 */