CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ionut Necula
Ionut Necula

Reputation: 11480

How to change previous elements on mouseover the current element?

I'm trying to make some sort of a timeline. When I mouseover the content I'm changing that content color and the colors of the years and the bullet indicators. But I don't know how to keep previous elements(the year and the bullet) hightlighted when I go to second or third element for example. How to do that? If I'm not explaining myself clearly, I'm more than happy to explain it in another way if needed. What I have so far:

$('.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>

Upvotes: 1

Views: 61

Answers (2)

isherwood
isherwood

Reputation: 61079

I've found that working with index values is often simpler than parsing and reconstructing ID values. In this case, we get the index of the hovered element, then use it to select the related bullet and those with lower indices. We add 1 to the index due to the zero-based values.

$('.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>

Upvotes: 1

Dekel
Dekel

Reputation: 62626

You can use the prev or prevAll to get previous elements by selector:

$('.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>

Upvotes: 1

Related Questions