如何更改鼠标悬停在当前元素上的以前的元素？

Question

我正在尝试制作某种时间表。当我将鼠标悬停在内容上时，我将更改内容颜色以及岁月和子弹指示器的颜色。但是，我不知道如何保持先前的元素（年份和子弹），例如当我转到第二或第三元素时突出显示。怎么做？如果我没有清楚地解释自己，我很乐意以其他方式解释它，如果需要的话。我至今：

$('.tml_btn').on('mouseover', function() { 
 
    $('.active_content').removeClass('active_content'); 
 
    $(this).addClass('active_content'); 
 
    var content_id = $(this).attr('id').replace('tml_btn_', ''); 
 
    $('.tml_el').removeClass('active_bullet'); 
 
    $('#tml_el_' + content_id).addClass('active_bullet'); 
 
});

.tml_content li { 
 
    width: 20px; 
 
} 
 
.bullet { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 20px; 
 
    background: #adadad; 
 
    margin: 0 auto; 
 
} 
 
.tml_bar .tml_el { 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    text-align: center; 
 
} 
 
.active_content { 
 
    color: #3A9296; 
 
} 
 
.active_bullet { 
 
    color: #3A9296; 
 
} 
 
.active_bullet .bullet { 
 
    background: #3A9296; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='timeline'> 
 
    <div class='tml_content'> 
 
    <ul> 
 
     <li class='tml_btn active_content' id='tml_btn_1'>content 1</li> 
 
     <li class='tml_btn' id='tml_btn_2'>content 2</li> 
 
     <li class='tml_btn' id='tml_btn_3'>content 3</li> 
 
     <li class='tml_btn' id='tml_btn_4'>content 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class='tml_bar'> 
 
    <div class='tml_el active_bullet' id='tml_el_1'> 
 
     <div class='year'>2000</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_2'> 
 
     <div class='year'>2006</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_3'> 
 
     <div class='year'>2011</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_4'> 
 
     <div class='year'>2016</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我发现与索引值一起工作通常比解析一个简单d重建ID值。在这种情况下，我们得到悬停元素的索引，然后用它来选择相关的项目符号和索引较低的项目符号。由于基于零的值，我们为索引加1。

$('.tml_btn').on('mouseover', function() { 
 
    $('.active_content').removeClass('active_content'); 
 
    $('.tml_el').removeClass('active_bullet'); 
 

 
    $(this).addClass('active_content'); 
 
    var idx = $(this).index() + 1; 
 

 
    for (var i = 0; i < idx; i++) { 
 
     $('.tml_el').eq(i).addClass('active_bullet'); 
 
    } 
 
});

.tml_content li { 
 
    width: 20px; 
 
} 
 
.bullet { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 20px; 
 
    background: #adadad; 
 
    margin: 0 auto; 
 
} 
 
.tml_bar .tml_el { 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    text-align: center; 
 
} 
 
.active_content { 
 
    color: #3A9296; 
 
} 
 
.active_bullet { 
 
    color: #3A9296; 
 
} 
 
.active_bullet .bullet { 
 
    background: #3A9296; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='timeline'> 
 
    <div class='tml_content'> 
 
    <ul> 
 
     <li class='tml_btn active_content' id='tml_btn_1'>content 1</li> 
 
     <li class='tml_btn' id='tml_btn_2'>content 2</li> 
 
     <li class='tml_btn' id='tml_btn_3'>content 3</li> 
 
     <li class='tml_btn' id='tml_btn_4'>content 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class='tml_bar'> 
 
    <div class='tml_el active_bullet' id='tml_el_1'> 
 
     <div class='year'>2000</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_2'> 
 
     <div class='year'>2006</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_3'> 
 
     <div class='year'>2011</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_4'> 
 
     <div class='year'>2016</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

可以使用prev或prevAll通过选择获取前元素：

$('.tml_btn').on('mouseover', function() { 
 
    $('.active_content').removeClass('active_content'); 
 
    $(this) 
 
    .addClass('active_content') 
 
    .prevAll('.tml_btn') 
 
    .addClass('active_content'); 
 
    var content_id = $(this).attr('id').replace('tml_btn_', ''); 
 
    $('.tml_el').removeClass('active_bullet'); 
 
    $('#tml_el_' + content_id) 
 
    .addClass('active_bullet') 
 
    .prevAll('.tml_el') 
 
    .addClass('active_bullet'); 
 
});

.tml_content li { 
 
    width: 20px; 
 
} 
 
.bullet { 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 20px; 
 
    background: #adadad; 
 
    margin: 0 auto; 
 
} 
 
.tml_bar .tml_el { 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    text-align: center; 
 
} 
 
.active_content { 
 
    color: #3A9296; 
 
} 
 
.active_bullet { 
 
    color: #3A9296; 
 
} 
 
.active_bullet .bullet { 
 
    background: #3A9296; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='timeline'> 
 
    <div class='tml_content'> 
 
    <ul> 
 
     <li class='tml_btn active_content' id='tml_btn_1'>content 1</li> 
 
     <li class='tml_btn' id='tml_btn_2'>content 2</li> 
 
     <li class='tml_btn' id='tml_btn_3'>content 3</li> 
 
     <li class='tml_btn' id='tml_btn_4'>content 4</li> 
 
    </ul> 
 
    </div> 
 
    <div class='tml_bar'> 
 
    <div class='tml_el active_bullet' id='tml_el_1'> 
 
     <div class='year'>2000</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_2'> 
 
     <div class='year'>2006</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_3'> 
 
     <div class='year'>2011</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    <div class='tml_el' id='tml_el_4'> 
 
     <div class='year'>2016</div> 
 
     <div class='bullet'></div> 
 
    </div> 
 
    </div> 
 
</div>