在对象上盘旋时，隐藏元素不会出现。

Question

我正在我的网站上建立一个路线图，计划是，如果你在绿色的圆点上盘旋，会出现一些语音气泡。.road1是第一个绿点类，.road1k是应该出现的卡片或语音泡。.road1的反应是:鼠标悬停，因为它使点像预期的那样大，但是.road1k仍然没有出现。

这是我的代码：

.road1 { 

    display: block;
}

.road1k {

display: none;

}

.road1:hover {

      -webkit-transform: scale(1.1);
}


.road1:hover .road1k {

    display: block!important;

}

我的网站http://rebitsoft.dev.rebitsoft.com/

您可以更改右上角的语言，以查看主页上的绿色点。

Answer 1

您的CSS定义是针对具有.road1k类的元素中的road1元素。在html结构中，road1k不包含在.road1元素中。有关更详细信息，请参见https://stackoverflow.com/a/13444826/8083244。

包括JQuery库(头脚本)：

<script src="http://rebitsoft.dev.rebitsoft.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0"></script>

一个简单的JQuery解决方案应该类似于(页脚脚本)：

$('.road1').hover(function() {
    $('.road1k').show();
    }, function(){
    $('.road1k').hide();
});

• 离开是因为我没有代表就这个问题发表评论。

编辑-添加了悬停的outFunction