Question

我正忙着使用悬停功能jquery开发一个小时间轴，并且遇到了一些问题。 Currenly我有两个类，一个用于时间轴顶部的日期，另一个用于时间轴底部的日期。每个工作都有一个JQUERY悬停功能，所以当你将鼠标悬停在顶部的日期上时，会出现一些文本，底部则相同。我遇到的问题是，一旦你开始复制列表项，徘徊不再是个体并且由重复的类控制，我将如何创建某种区别，所以这不会发生。

我已经包含了一个JSFIDDLE http://jsfiddle.net/Jason1975/6nwkd2c8/10/，这显示了这个问题。

非常感谢一些指导。

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;
  }

Answer 1

如果我找到你，请看this example：

$(document).ready(function() {
$(".block-up a").hover(function(){
$(this).parent().parent().find(".event-up").css('visibility', 'visible');
},
function() {
$(".event-up").css('visibility', 'hidden');
});
$(".block-down a").hover(function(){
$(this).parent().parent().find(".event-down").css('visibility', 'visible');
},
function() {
$(".event-down").css('visibility', 'hidden');
});
});

Answer 2

您可以使用以下solution。

$(function() {
    function findEvent(el) {
        return el.className.indexOf('up') >= 0 ? $(el).next() : $(el).prev();    
    }
    $('.date-down, .date-up').hover(function(){
        findEvent(this).css('visibility', 'visible');
    }, function(){
        findEvent(this).css('visibility', 'hidden');
    })    
});

或者更好地为up和down块添加公共类：block, event, date。并使用这些类来连接行为。

我如何在我的时间轴中创建独特的鼠标悬停项目？

2 个答案: