使用JQuery

Question

我在JQuery中选择元素时遇到问题。 我需要的是当我将鼠标悬停在时间轴面板上时对日期产生影响。但只选择面板的日期。

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

当您将鼠标悬停在上一个圈上应用的时间轴面板颜色效果时，您会看到此代码段。  但我还需要在之前的日期中生效。 我尝试了很多东西，但我没有得到它。 请记住，我有多个时间轴专家组。我想仅在当前面板的前一天应用效果。 先感谢您。

Answer 1

使用$(this).closest('li').prev().find(".tldate")访问与tldate对应的timeline-panel。

见下面的演示：

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