有没有办法避免对悬停时产生相同视觉效果的不同锚标记 (<a>) 重复 mouseover/mouseout 函数？

Question

我是 HTML 和 JS 的新手。我的代码产生了我想要的效果，但它是重复的。我为链接（锚标签）使用了不同的 ID，并为每个 ID 分别编写了 JS 代码（这两个 ID 完全相同）。我将在我的网页中再添加 10 个这样的链接，因此一遍又一遍地编写相同的代码片段真的很愚蠢。我知道一定有办法避免这种重复，但我在网上找不到。

我对这个问题的想法是，将 ID 存储在一个数组中，然后运行 'for loop' 覆盖这些 ID（mouseover 和 mouseout 函数将在循环内）。如果可能的话，该怎么做？如果没有，请建议其他方式。

这是代码（查看 'body' 内的 'script' 标签）。

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

Answer 1

这样你就可以不断添加元素了。您唯一需要做的就是 data-link params unique 并且应该 link 到其他 class.

function mouseover() {
  var link = $(this).data("link");
  console.log(link);
  $('span#name'+link).css('font-family', 'calibri')
  $('span#ver'+link).css('border-left', '2px solid #a5a5a5')
  $('span#statement'+link).css('font-family', 'calibri')
}

function mouseout() {
  var link = $(this).data("link");
  $('span#name'+link).css('font-family', 'calibri light')
  $('span#ver'+link).css('border-left', '1px solid #a5a5a5')
  $('span#statement'+link).css('font-family', 'calibri light')
}



$('.linkevent').mouseover(mouseover);
$('.linkevent').mouseout(mouseout);

{
  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;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <style>
    .name
  </style>
</head>

<body>
  <a href="link1.html" style="text-decoration: none">
    <div id="link1" data-link="1" class="linkevent">
      <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" data-link="2" class="linkevent">
      <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>
  </script>
</body>

</html>

Answer 2

你只用CSS就能解决这一切。由于性能原因，我不会在这里使用 jQuery。

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

Answer 3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  a.linkcss{
     color: red;
   }
</style>
<script>
$(document).ready(function(){
  
  $(".link").hover(function(){
       
       $("#"+this.id).addClass("linkcss");
   },function(){
        $("#"+this.id).removeClass("linkcss");
   })
});
</script>
</head>
<body>

 <a href="#" class="link" id="link1" >link1</a>
  <a href="#" class="link" id="link2" >link2</a>
   <a href="#" class="link" id="link3" >link3</a>

</body>
</html>

你可以试试这个，它有效。

有没有办法避免对悬停时产生相同视觉效果的不同锚标记 (<a>) 重复 mouseover/mouseout 函数？

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

html

jquery

mouseover

mouseout