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

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

1 个答案: