Anonymous Anonymous - 2 months ago 8
CSS Question

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>




Answer

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>

Comments