Javascript 静态，悬停，点击，鼠标退出当你点击其他东西

我正在设计一个时间线，当你将鼠标悬停在一个图像上时，它会变成另一个图像，当你点击它时，它会变成另一个图像。然后，当您单击时间线的不同部分时，它会关闭您刚才单击的内容。有人能帮我吗

这是我到目前为止所拥有的

HTML:

Javascript:

$('.bulletOne').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}

}))

---

您需要遍历列表并禁用那些不应该处于活动状态的。试试这个：

$(".bullet").click(function() { //Click function
    var selBullet = $(this), //Selected button
        bullets = document.getElementsByClassName("bullet"); //bullets nodeList
    selBullet.addClass("activeBullet"); //adding activeBullet class
    for(var i = bullets.length - 1; i >= 0; --i) { //iterate through all
        if(!selBullet.is($(bullets[i]))) { //check if same as selected
            $(bullets[i]).removeClass("activeBullet"); //if not, remove class
        }
    }
});

这将遍历所有项目符号的节点列表，然后删除项目符号上不应处于活动状态的活动类。以下是一个片段：

$（“.bullet”）。单击（函数（）{
var selBullet=$（此），
项目符号=document.getElementsByClassName（“项目符号”）；
selBullet.addClass（“activeBullet”）；
对于（变量i=项目符号。长度-1；i>=0；--i）{
如果（！selbill.is（$（项目符号[i]））{
$（项目符号[i]）.removeClass（“activeBullet”）；
}
}
});
.bullet{
颜色：红色；
}
.activeBullet{
颜色：绿色；
}

测试1
测试2
测试3
你试过什么了吗？或者你想让我们用勺子喂你吗？对不起，我来这里是想从知识渊博的人那里得到反馈，而不是粗鲁的回答。我仍然在学习，我对这一切都非常陌生，整天都在研究和尝试JS小提琴上的东西。如果你愿意帮助我，而不是被动地攻击我，我很乐意向你展示我目前所拥有的一切。我愿意帮助那些表现出努力并主动帮助你得到答案的人。如果你尝试过什么，很好，那么告诉我们，我们可以帮助你。当你不努力的时候，它给我们的感觉是你什么都没做，你只是想得到答案，不费吹灰之力。在这里，没有人有义务帮助任何人，每个人都是自费来的。安德鲁，我已经用我目前所拥有的最接近我需要的东西更新了我的评论部分。当前，有静态图像、悬停状态图像和单击图像。有4颗子弹是这样精确设置的。我希望在单击另一个项目符号时，它可以关闭上一个项目符号。如果你明白我的意思，请告诉我。你有什么具体问题吗？这是相当广泛的。是否有任何错误、问题等？
$('.bulletOne').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}

$('.bulletTwo').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}
});

$('.bulletThree').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}
});

$('.bulletFour').click(function(){
if($(this).hasClass('active')){
    $(this).removeClass('active')
} else {
    $(this).addClass('active')
}
});

$(".bullet").click(function() { //Click function
    var selBullet = $(this), //Selected button
        bullets = document.getElementsByClassName("bullet"); //bullets nodeList
    selBullet.addClass("activeBullet"); //adding activeBullet class
    for(var i = bullets.length - 1; i >= 0; --i) { //iterate through all
        if(!selBullet.is($(bullets[i]))) { //check if same as selected
            $(bullets[i]).removeClass("activeBullet"); //if not, remove class
        }
    }
});