要素のホバー上に要素を表示

Question

人の場所のグループがマップに永久に表示されるインタラクティブマップを作成しようとしています。これらの位置インジケータの上にマウスポインタを置くと、4つの情報その特定の人に ロケーションと情報テーブルをそれぞれ表す2つの要素を作成しましたが、これらの要素の1つを他の要素のホバーに表示しようとしています。

フィドル以下を参照してください：

https://jsfiddle.net/8ymdmzv1/

を私は（見つけ提案は下記を参照してくださいサイトを閲覧し、jQueryを使って隠れ/ CSSで不透明度を変更して示すなど、様々な方法を発見した - 私はリセットされています要素は現在のフィドルでスタイリング）が、喜びはありません。問題は2つの要素を一緒にリンクしているように見えるが、午後の終わりにはそうだ。

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