I am currently working on a project involving a small timeline that utilizes the hover function in jQuery. I've encountered an issue where duplicating list items causes the hovers to no longer function individually, as they are controlled by the duplicated classes. Does anyone have any suggestions on how I can differentiate these hovers so that they remain independent?
If you'd like to see the issue firsthand, you can check out the JSFIDDLE http://jsfiddle.net/Jason1975/6nwkd2c8/10/.
Any guidance or help would be greatly appreciated.
HTML CODE
<div id="container">
<ul id="new">
<!-- Block Up Date on top -->
<li class="block-up">
<p class="date-up"><a href="" id="1">24 January 2015</a></p>
<p class="event-up">This event happend on this date</p>
</li>
<!-- Block Down Date at the bottom -->
<li class="block-down">
<p class="event-down">This event happend on this date</p>
<p class="date-down"><a href="" >24 February 2015</a></p>
</li>
<!-- Block Up Date on top -->
<li class="block-up">
<p class="date-up"><a href="">24 January 2015</a></p>
<p class="event-up">This event happend on this date</p>
</li>
<!-- Block Down Date at the bottom -->
<li class="block-down">
<p class="event-down">This event happend on this date</p>
<p class="date-down"><a href="">24 February 2015</a></p>
</li>
</ul>
</div>
JQUERY
<script src="js/jquery_1-11.js" type="text/javascript"></script>
<script type="text/javascript">
<!--the toggle-->
$(document).ready(function() {
$(".block-up a").hover(function(){
$(".event-up").css('visibility', 'visible');
},
function() {
$(".event-up").css('visibility', 'hidden');
});
$(".block-down a").hover(function(){
$(".event-down").css('visibility', 'visible');
},
function() {
$(".event-down").css('visibility', 'hidden');
});
});
</script>
CSS
a { font-size: 14px; text-decoration: none; color: #666666; }
a:hover { font-size: 14px; color: #F47C00; }
/* Timeline */
#container { width: 800px;
height: 80px;
margin: 0 auto;
overflow: hidden;
white-space:nowrap;
background:url(../images/line.png) center 50% repeat-x;
}
ul#new { display: inline; }
.block-up { position: relative;
display: inline-block;
list-style:none;
width: 200px;
height: 80px;
margin: 0!important;
top: 0;
background: url(../images/dot.png) center 50% no-repeat;
}
.block-down { position: relative;
display: inline-block;
list-style:none;
width: 200px;
height: 80px;
margin: 0!important;
top: 0;
background: url(../images/dot.png) center 50% no-repeat;
}
.block-down a { font-size: 14px; }
.block-down a:hover { font-size: 14px; }
.date-up { padding-bottom: 20px;
text-align:center;
}
.event-up { padding-top: 20px;
text-align: center;
font-size: 14px;
color: #F47C00;
visibility: hidden;
}
.date-down { padding-top: 20px;
text-align:center;
}
.event-down { padding-bottom: 20px;
text-align: center;
font-size: 14px;
color: #F47C00;
visibility:hidden;
}