jquery - 在悬停不同元素时显示元素

Question

我正在尝试创建一个交互式 map ，其中一组人的位置永久显示在 map 上，并且在将鼠标悬停在这些位置指示器上时，会出现一个表格，提供关于该特定人的 4 条信息。我已经创建了两个元素来分别表示位置和信息表，现在我正在尝试让其中一个元素出现在另一个元素的悬停上。

请看下面的 fiddle :

https://jsfiddle.net/8ymdmzv1/

我浏览了该站点，发现了各种方法，包括使用 css 更改不透明度以及使用 jquery 显示/隐藏(请参阅下面的建议 - 我已重置当前 fiddle 中的元素样式)但没有快乐。问题似乎是将这两个元素联系在一起，但在整个下午之后。

.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 选择器不起作用。它的工作原理，如果你可以重新排序元素到这个:

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