两个不同元素的同步悬停

Question

我正在尝试在名为#front 的 div 中创建一个包含重复正文的网站。还有一个经典的body，命名为#back。

我想做的是将鼠标悬停在两个不同的 div #front 和 #back 上。因此，当只有一个链接时，这可以正常工作，但不是在您添加更多链接时，因为它会将效果应用于所有 a 而不仅仅是 您悬停的那个，它是对应的一个另一个div。

例如： 我想将“amet”悬停在 #back 中以使“amet 在 #front 中具有相同的样式，但我不希望 #back 和 #front 中的“其他amet”具有相同的样式。

我想知道是否可以在元素上没有 ids 的情况下完成此操作，但如果不是，那也很棒。 感谢您的帮助！

$("a").on({
    mouseenter: function () {
     
    $("#front a, #back a").css({
    "font-style": "italic"
    })
    },
    mouseleave: function () {
   
    $("#front a, #back a").css({
    "font-style": "normal"
    })
    }
});

.scroll {
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
 
}
#front {
  overflow: hidden;
  position: absolute;
  background-color: grey;
  color: white;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto auto auto auto;
  width: 25%;
  height: 35%;
  font-size: 2rem;
}
#back {
  overflow: auto;
  font-size: 2rem;
}

p {
  margin: 0;
  padding: 0;
}

a:hover{
  font-style: italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="scroll" id="back">
  <a href="#">amet</a> &
  <a href="#">other amet</a>
</div>

<div class ="scroll" id="front">
  <a href="#">amet</a> &
  <a href="#">other amet</a>
</div>

Answer 1

要执行您需要的操作，您可以使用 :nth-child 在它们各自的容器中按索引关联这两个元素。试试这个：

$("a").on('mouseenter mouseleave', e => {
  let index = $(e.target).index();
  $(`#front a:nth-child(${index + 1}), #back a:nth-child(${index + 1})`).css('font-style', e.type == 'mouseenter' ? 'italic' : 'normal')
});

.scroll {
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
}

#front {
  overflow: hidden;
  position: absolute;
  background-color: grey;
  color: white;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto auto auto auto;
  width: 25%;
  height: 35%;
  font-size: 2rem;
}

#back {
  overflow: auto;
  font-size: 2rem;
}

p {
  margin: 0;
  padding: 0;
}

a:hover {
  font-style: italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll" id="back">
  <a href="#">amet</a> &amp;
  <a href="#">other amet</a>
</div>

<div class="scroll" id="front">
  <a href="#">amet</a> &amp;
  <a href="#">other amet</a>
</div>