I'm trying to make a website with a duplicated body in a div called #front. There is also the classic body which is named #back.
What I would like to do is to have synchronized hovers over the two differents divs #front & #back. So this is working fine when there is only one, but it's not as soon as you add more links, since it will apply the effects to all the a and not only the one you are hovering and it's corresponding one in the other div.
For exemple: I would like to hover "amet" in #back to have "amet in #front in the same style but I don't want "other amet" in #back and #front with the same style.
I was wondering if this could be done without having ids on the elements, but if it's not, it's also great. Thanks for the help!
$("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>To do what you require you can relate the two elements by index within their respective containers using :nth-child. Try this:
$("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> &
<a href="#">other amet</a>
</div>
<div class="scroll" id="front">
<a href="#">amet</a> &
<a href="#">other amet</a>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다