title: Select second previous element with JQuery
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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'
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="timeline"&gt;
    &lt;li&gt;
      &lt;div class="tldate"&gt;
        &lt;div class="movement"&gt;&lt;/div&gt;JAN 2008 - DEC 2012&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div class="tl-circ"&gt;&lt;/div&gt;
      &lt;div class="timeline-panel"&gt;
        &lt;div class="tl-heading"&gt;
          &lt;h4&gt;UNIVERSITY OF ENGINEERING&lt;/h4&gt;
          &lt;p&gt;&lt;small class="text-muted"&gt;Bachelor of Science&lt;/small&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tl-body"&gt;
          &lt;p&gt;Completed graduation from University of Engineering with the major of Computer Science &amp;amp; Engineering. Achieved the Dean Award for extra-ordinary result.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>as you see in this code snippet when you hover on the <strong>timeline panel</strong> color effect applied on the previous <strong>circle</strong> .
   but I need also to make effect in the previous <strong>date</strong>.
  I tried many things but i didn't get it.
  please remember, I have more than one <strong>timeline panel</strong> . and I want to apply the effect only on the date previous of the current panel.
  thank you in advance.   </p>