CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
Yahya Essam
Yahya Essam

Reputation: 1912

Select second previous element with JQuery

I have a problem with selecting element in JQuery. what I need is when I hover on timeline panel do effect on the date. but only select the date of the panel.

$(function() {
  "use strict";
  $('.timeline li .timeline-panel').on("mouseenter", function() {
    $(this).prev(".tl-circ").css({
      'background': '#000'

    });
  });
  $('.timeline li .timeline-panel').on("mouseleave", function() {
    $(this).prev(".tl-circ").css({
      'background': '#fff'
    });
  });

  $('.timeline li .timeline-panel').on("mouseenter", function() {
    $(this).prev(".tldate").css({
      'background': '#000'

    });
  });
  $('.timeline li .timeline-panel').on("mouseleave", function() {
    $(this).prev(".tldate").css({
      'background': '#fff'
    });
  });
});
.timeline-panel {
  background-color: #FFF;
}
.timeline li .tl-circ {
  position: absolute;
  top: 23px;
  left: 50%;
  text-align: center;
  background: #fff;
  color: #fff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-left: -16px;
  border: 3px solid #90acc7;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  z-index: 1000;
  -webkit-transition: all .27s ease-in-out;
  transition: all .27s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline">
  <li>
    <div class="tldate">
      <div class="movement"></div>JAN 2008 - DEC 2012</div>
  </li>
  <li>
    <div class="tl-circ"></div>
    <div class="timeline-panel">
      <div class="tl-heading">
        <h4>UNIVERSITY OF ENGINEERING</h4>
        <p><small class="text-muted">Bachelor of Science</small>
        </p>
      </div>
      <div class="tl-body">
        <p>Completed graduation from University of Engineering with the major of Computer Science &amp; Engineering. Achieved the Dean Award for extra-ordinary result.</p>
      </div>
    </div>
  </li>
</ul>

as you see in this code snippet when you hover on the timeline panel color effect applied on the previous circle . but I need also to make effect in the previous date. I tried many things but i didn't get it. please remember, I have more than one timeline panel . and I want to apply the effect only on the date previous of the current panel. thank you in advance.

Upvotes: 1

Views: 1688

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Use $(this).closest('li').prev().find(".tldate") to access the tldate corresponding to the timeline-panel.

See demo below:

$(function() {
  "use strict";
  $('.timeline li .timeline-panel').on("mouseenter", function() {
    $(this).prev(".tl-circ").css({
      'background': '#000'

    });
    $(this).closest('li').prev().find(".tldate").css({
      'background': '#000'

    });
  });
  $('.timeline li .timeline-panel').on("mouseleave", function() {
    $(this).prev(".tl-circ").css({
      'background': '#fff'
    });
    $(this).closest('li').prev().find(".tldate").css({
      'background': '#fff'
    });
  });


});
.timeline-panel {
  background-color: #FFF;
}
.timeline li .tl-circ {
  position: absolute;
  top: 23px;
  left: 50%;
  text-align: center;
  background: #fff;
  color: #fff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-left: -16px;
  border: 3px solid #90acc7;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  z-index: 1000;
  -webkit-transition: all .27s ease-in-out;
  transition: all .27s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timeline">
  <li>
    <div class="tldate">
      <div class="movement"></div>JAN 2008 - DEC 2012</div>
  </li>
  <li>
    <div class="tl-circ"></div>
    <div class="timeline-panel">
      <div class="tl-heading">
        <h4>UNIVERSITY OF ENGINEERING</h4>
        <p><small class="text-muted">Bachelor of Science</small>
        </p>
      </div>
      <div class="tl-body">
        <p>Completed graduation from University of Engineering with the major of Computer Science &amp; Engineering. Achieved the Dean Award for extra-ordinary result.</p>
      </div>
    </div>
  </li>
</ul>

Upvotes: 1

Related Questions