Is there a way to avoid repeating the mouseover/mouseout function for different anchor tags (<a>) which produce same visual effect when hovered over?

I am new to HTML and JS. My code produces the effect I want but it is repetitive. I used different IDs for the links (anchor tags) and wrote the JS code separately for each ID (which is exactly same for both of them). I am going to have ten more links like this in my web page so it would be really stupid to write the same piece of code again and again. I know there must be a way to avoid this repetition but I couldn't find it on internet.

My thought on this problem was like, storing the IDs in an array and then running 'for loop' over those IDs (mouseover and mouseout function would be inside the loop). If this is possible, how to do it? If not, please suggest some other way.

Here is the code (look at the 'script' tag inside the 'body').

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <style>
        .name
        {
            color:black;
            font-family:calibri light;
            float:left;
        }
        .vertical
        {
            border-left:1px solid #a5a5a5;
            height:20px;
            margin-left:20px;
            margin-right:25px;
            float:left;
        }
        .statement
        {
            color:black;
            font-family:calibri light;
        }
    </style>
</head>

<body>
    <a href="link1.html" style="text-decoration: none">
        <div id="link1">
            <span id="name1" class="name">link1</span>
            <span id="ver1" class="vertical"></span>
            <span id="statement1" class="statement">Put your mouse over here</span>
        </div>
    </a>

    <br>

    <a href="link2.html" style="text-decoration: none">
        <div id="link2">
            <span id="name2" class="name">link2</span>
            <span id="ver2" class="vertical"></span>
            <span id="statement2" class="statement">Put your mouse over here</span>
        </div>
    </a>

    <script>
        function mouseover1()
        {
            $('span#name1').css('font-family','calibri')
            $('span#ver1').css('border-left','2px solid #a5a5a5')
            $('span#statement1').css('font-family','calibri')
        }
        function mouseout1()
        {
            $('span#name1').css('font-family','calibri light')
            $('span#ver1').css('border-left','1px solid #a5a5a5')
            $('span#statement1').css('font-family','calibri light')
        }

        function mouseover2()
        {
            $('span#name2').css('font-family','calibri')
            $('span#ver2').css('border-left','2px solid #a5a5a5')
            $('span#statement2').css('font-family','calibri')
        }
        function mouseout2()
        {
            $('span#name2').css('font-family','calibri light')
            $('span#ver2').css('border-left','1px solid #a5a5a5')
            $('span#statement2').css('font-family','calibri light')
        }

        $('div#link1').mouseover(mouseover1);
        $('div#link1').mouseout(mouseout1);
        $('div#link2').mouseover(mouseover2);
        $('div#link2').mouseout(mouseout2);
    </script>
</body>
</html>

Solution

You can solve all this only with CSS. I would not use jQuery here, because of performance reasons.

.custom-link {
  text-decoration: none;
}

.custom-link .contents {
  margin-right: 20px;
  color: #000;
  font-family: 'Calibri', sans-serif;
  font-weight: 300;
}

.custom-link .contents:not(:first-child) {
  padding-left: 25px;
  border-left: 1px solid #a5a5a5;
}

.custom-link:hover .contents {
  font-weight: 500;
}

.custom-link:hover .contents:not(:first-child) {
  padding-left: 25px;
  border-left-width: 2px;
}

<a href="link1.html" class="custom-link">
  <div id="link1">
    <span id="name1" class="contents name">link1</span>
    <span id="statement1" class="contents statement">Put your mouse over here</span>
  </div>
</a>

<br>

<a href="link2.html" class="custom-link">
  <div id="link2">
    <span id="name2" class="contents name">link2</span>
    <span id="statement2" class="contents statement">Put your mouse over here</span>
  </div>
</a>