I'm attempting to achieve an effect where an element will show or hide when I hover over a completely different element.
Currently, my approach involves using lists and indexes so that the nth item in list 2 changes when the nth item in list 1 is hovered over. This method would provide a general solution for multiple objects rather than individually pairing elements and writing jQuery rules for each one. While I've looked at other discussions on this topic, none seem to offer a universal solution.
Below is a sample of code I've been experimenting with:
I am relatively new to jQuery, so thank you for your understanding and patience as I navigate through this learning process.
<!doctype html>
<html>
<head>
<title>addClass demo</title>
<style>
.disappear { display: none }
</style>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<ul>
<li class = "one">Hello</li>
<li class = "one">and</li>
<li class = "one">Goodbye</li>
</ul>
<ul>
<li class = "two">Hello</li>
<li class = "two">and</li>
<li class = "two">Goodbye</li>
</ul>
<script>
$( "li one" ).on('mouseenter', function() {
var indx = $(this).eq();
$("li two").eq(indx).addClass("disapear");
});
$( "li" ).on('mouseleave', function() {
$(this).removeClass("disappear");
});
</script>
</body>
</html>