Question

我有一个包含成对国家的冠军表（参见第一张图片 1 ），我希望当用户将鼠标悬停在每个国家的国旗上时，会显示一个包含有关该国家/地区的更多信息的框（首都、人口等等），有点像我刚刚快速绘制的第二张图像。 2

这似乎是一个很容易解决的问题，但我在 CSS 中尝试了一些常用的东西，但似乎没有任何效果......

这是我的每场比赛的 HTML 代码（2 个国家/地区的方框）：

            <div class="matchBox matchBox1">
                <div class="matchBox_team1">
                    <img class="team1_flag" src="img/flags/EMPTY.png" height="15px" width='20px'>
                    <div class="team1_name"></div>
                    <div class="team1_popIndex"></div><div> | </div>
                    <div class="team1_alea"></div><div> | </div>
                    <div class="team1_score"></div>
                    <div>Box with information</div>
                </div>
                <div class="matchBox_team2">
                    <img class="team2_flag" src="img/flags/EMPTY.png" height="15px" width='20px'>
                    <div class="team2_name"></div>
                    <div class="team2_popIndex"></div><div> | </div>
                    <div class="team2_alea"></div><div> | </div>
                    <div class="team2_score"></div>
                    <div>Box with information</div>
                </div>  
            </div>

我应该如何进行？

Answer 1

您可以使用相邻的同级选择器来完成此操作：

.matchBox_team {
  position: relative;
}

.info_box {
  position: absolute;
  display: none;
}

.matchBox_team:hover+.info_box {
  display: block;
}

<div class="matchBox matchBox1">
  <div class="matchBox_team">
    <img class="team1_flag" src="img/flags/EMPTY.png" height="15px" width='20px'>
  </div>
  <div class="info_box">
    <div class="team1_name"></div>
    <div class="team1_popIndex"></div>
    <div> | </div>
    <div class="team1_alea"></div>
    <div> | </div>
    <div class="team1_score"></div>
    <div>Box with information</div>
  </div>
  <div class="matchBox_team">
    <img class="team2_flag" src="img/flags/EMPTY.png" height="15px" width='20px'>
  </div>
  <div class="info_box">
    <div class="team2_name"></div>
    <div class="team2_popIndex"></div>
    <div> | </div>
    <div class="team2_alea"></div>
    <div> | </div>
    <div class="team2_score"></div>
    <div>Box with information</div>
  </div>
</div>

Answer 2

为元素使用相同的类名，而不是team_flag1、team_flag2、...

如果您使用 jQuery，此示例可以指导。

<div class="matchBox matchBox1">
<div class="matchBox_team1">
    <img class="team_flag" src="img/flags/EMPTY.png" height="15px" width='20px'>
    <div class="team_name">Oman</div>
    <div class="team_popIndex">1</div><div>|</div>
    <div class="team_alea"></div><div> | </div>
    <div class="team_score"></div>
    <div>Box with information</div>
</div>
<div class="matchBox_team2">
    <img class="team_flag" src="img/flags/EMPTY.png" height="15px" width='20px'>
    <div class="team_name">France</div>
    <div class="team_popIndex">2</div><div>|</div>
    <div class="team_alea"></div><div> | </div>
    <div class="team_score"></div>
    <div>Box with information</div>
</div>

<script>
    $(".team_flag").hover(function(){
        const teamName = $(this).siblings(".team_name").text();
        const teamPopIndex = $(this).siblings(".team_popIndex").text();
        console.log(teamName + " " + teamPopIndex);
    });
</script>

当类元素悬停时显示一个 div

2 个答案: