有没有办法避免对不同的锚标签（<a>）重复鼠标悬停/鼠标悬停功能，这些锚标签在悬停时会产生相同的视觉效果？答案

【问题标题】：Is there a way to avoid repeating the mouseover/mouseout function for different anchor tags (<a>) which produce same visual effect when hovered over?有没有办法避免对不同的锚标签（<a>）重复鼠标悬停/鼠标悬停功能，这些锚标签在悬停时会产生相同的视觉效果？
【发布时间】：2020-10-27 08:16:28
【问题描述】：

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

我对这个问题的想法是，将 ID 存储在一个数组中，然后在这些 ID 上运行“for 循环”（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>

【问题讨论】：

标签： html jquery mouseover mouseout

【解决方案1】：

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

你可以试试这个。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这样你可以继续添加元素。你唯一需要做的就是data-link params 是唯一的并且应该链接到其他类。

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>

【讨论】：