use same class names for elements, not team_flag1, team_flag2, …

if you use jQuery, this sample can guide.

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

You can use adjacent sibling selectors to accomplish this:

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

I have a championship table with pairs of countries (see first image 1 ), and I want that when user hovers the flag of each country, a box is displayed with more information about the country (capitale, population and such), a little bit like on the second image that I just quickly drew. 2

It seems like it would be an easy problem to solve but I have tried a few usual things in CSS and nothing seems to be working…

Here’s my HTML code for each of the matches (box for 2 countries) :

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

How should I proceed ?