显示图像的相关分区

Question

我正在尝试将jquery中的悬停/单击结合起来，以便在图片下面的div同时显示单击和悬停。我绝不是Jquery方面的专家，所以我很努力。我以前发过帖子，但后来就删除了，为这个垃圾问题道歉。

我创建了一个小提琴，它给出了我要做的事情的总体想法--第二次尝试。

<div class="timeline-pills">
    <div class='timeline-element col-md-2' id='service-1'>
        <img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/advisory-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/advisory.png';" src="https://tbli.sitewidedesign.co.uk/images/services/advisory.png" alt="advisory" width="20%"><h2>Advisory</h2>
    </div>
    <div class='timeline-element col-md-2' id='service-2'>
        <img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly.png';" src="https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly.png" alt="tbli weekly" width="20%"><h2>TBLI WEEKLY</h2>
    </div>
    <div class='timeline-element col-md-2' id='service-3'>
        <img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/events-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/events.png';" src="https://tbli.sitewidedesign.co.uk/images/services/events.png" alt="events" width="20%"><h2>EVENTS</h2>
    </div>
    <div class='timeline-element col-md-2' id='service-4'>
        <img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/foundation-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/foundation.png';" src="https://tbli.sitewidedesign.co.uk/images/services/foundation.png" alt="tbli foundation" width="20%"><h2>FOUNDATION</h2>
    </div>
    <div class='timeline-element col-md-2' id='service-5'>
        <img onmouseover="this.src='https://tbli.sitewidedesign.co.uk/images/services/capital-hover.png';" onmouseout="this.src='https://tbli.sitewidedesign.co.uk/images/services/capital.png';" src="https://tbli.sitewidedesign.co.uk/images/services/capital.png" alt="advisory" width="20%"><h2>CAPITAL CONNECT</h2>
    </div>
</div>
<div class='timeline-info-panels'>
    <div class='timeline-info ' id='1'>
        <h3>TBLI Consulting & Advisory offers:</h3>
    </div>
    <div class='timeline-info' id='2'>
        <h3>TBLI WEEKLY</h3>
    </div>
    <div class='timeline-info' id='3'>
        <h3>EVENTS</h3>
    </div>
    <div class='timeline-info' id='4'>
        <h3>FOUNDATION</h3>
    </div>
    <div class='timeline-info' id='5'>
        <h3>TBLI CAPITAL CONNECT</h3>
    </div>
</div>

下面是我找到并修改的一些代码：

$('.timeline-info-panels').hide();
$('.timeline-info').hide();

$('.timeline-element').on('mouseenter', function() {
  $(this).addClass('hover-over-time-pill');
  $('.timeline-info-panels').show();

  var hoverID = $(this).attr("id");
  var newID = hoverID.replace('service-', '');
  $('#' + newID).show();
});

$('.timeline-element').on('mouseleave', function() {
  $(this).removeClass('hover-over-time-pill');
  $('.timeline-info-panels .timeline-info').hide();

  var hoverID = $(this).attr("id");
  var newID = hoverID.replace('service-', '');
  $('#' + newID).hide();
});

$('.timeline-element').click(function() {

  var deActive = $(this).hasClass('active');

  // Removes old active elements for second click
  $('.timeline-element.active,.timeline-info.active').removeClass('active');

  // If clicked element is not active, activate it.
  if (deActive == false) {
    var hoverID = $(this).attr("id");
    var newID = hoverID.replace('service-', '');

    // Set active
    $('#' + newID).addClass('active');
    $(this).addClass('active');
  }
});

我被困在：

1. 使咨询文本/内容显示在页面加载上
2. 当悬停之前的文本没有消失时，它只会在单击时消失。

很抱歉我之前试图问这个问题。

如有任何建议或建议，将不胜感激。

唐娜

Answer 1

看看这个片段。

​

$(document)
  .on("mouseenter", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");
    const dataTargetElem = $("div.timeline-info#" + dataTarget);

    $(".timeline-pills .timeline-element").removeClass("hover-pill");
    currentElement.addClass("hover-pill");

    $(".timeline-info").hide();
    dataTargetElem.show();
  })
  .on("mouseleave", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const activeElement = $(".timeline-pills .timeline-element.active");
    const dataTarget = activeElement.data("target");
    const dataTargetElem = $("div.timeline-info#" + dataTarget);

    $(".timeline-pills .timeline-element").removeClass("hover-pill");

    $(".timeline-info").hide();
    dataTargetElem.show();
  })
  .on("click", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");

    const dataTargetElem = $("div.timeline-info#" + dataTarget);
    $(".timeline-pills .timeline-element").removeClass("active");
    currentElement.addClass("active");

    $(".timeline-info").hide();
    dataTargetElem.show();
  });

body {
  margin: 1rem;
  padding: 0;
  background: #f0f0f1;
  font-family: "Jost", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.timeline-pills {
  display: flex;
  align-items: center;
}

.timeline-pills .timeline-element {
  background: #dcdcde;
  text-align: center;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem 0 0;
  color: #50575e;
  display: block;
  cursor: pointer;
}

.timeline-pills .timeline-element h2 {
  vertical-align: middle;
  max-width: 100%;
  margin: 0;
  font-size: 12px;
  color: inherit;
}

.timeline-pills .timeline-element img {
  width: 30px;
}

.timeline-pills .timeline-element.active,
.timeline-pills .timeline-element.hover-pill {
  background: #fafafa;
  color: #0a95ff;
}

.timeline-info-panels {
  background: #fafafa;
}

.timeline-info-panels .timeline-info {
  padding: 1rem;
  display: none;
}

.timeline-info-panels .timeline-info.active {
  display: block;
}

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700&display=swap" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline-pills">
  <div class="timeline-element active" data-target="service-1">
    <img src="https://tbli.sitewidedesign.co.uk/images/services/advisory.png" alt="advisory" />
    <h2>Advisory</h2>
  </div>
  <div class="timeline-element" data-target="service-2">
    <img src="https://tbli.sitewidedesign.co.uk/images/services/tbli-weekly.png" alt="tbli weekly" />
    <h2>TBLI WEEKLY</h2>
  </div>
  <div class="timeline-element" data-target="service-3">
    <img src="https://tbli.sitewidedesign.co.uk/images/services/events.png" alt="events" />
    <h2>EVENTS</h2>
  </div>
  <div class="timeline-element" data-target="service-4">
    <img src="https://tbli.sitewidedesign.co.uk/images/services/foundation.png" alt="tbli foundation" />
    <h2>FOUNDATION</h2>
  </div>
  <div class="timeline-element" data-target="service-5">
    <img src="https://tbli.sitewidedesign.co.uk/images/services/capital.png" alt="advisory" />
    <h2>CAPITAL CONNECT</h2>
  </div>
</div>
<div class="timeline-info-panels">
  <div class="timeline-info active" id="service-1">
    <h3>TBLI Consulting & Advisory offers:</h3>
    <p>
      Sustainable & Social Capital Strategies – Formation & Funding Strategies
      <br /> Permanent Capital Strategies & Platform Connectivity (public/private markets) <br /> Market Intelligence & Forensic Due Diligence<br /> Direct access to TBLI network of investors through TBLI’s Capital Connect investor database.<br /> OCIO
      Models (Outsourced Officer/Advisor) Advisory & Engagement<br /> Investor Relations – Communications & Reporting; Compliance<br />
    </p>
  </div>
  <div class="timeline-info" id="service-2">
    <h3>TBLI WEEKLY</h3>
    <p>
      A weekly newsletter curated by TBLI featuring all the most important Impact Investing/ESG news combined with all the upcoming TBLI events & announcements.
    </p>
  </div>
  <div class="timeline-info" id="service-3">
    <h3>EVENTS</h3>
    <p>
      TBLI has a plethora of experience hosting events and curating programmes, having organised conferences focussing on educating investors on the importance of impact investing for over 25 years. Since the outbreak of the pandemic, we have shifted focus
      to virtual events after doing annual conferences on a regular basis, this has allowed us to increase our reach and allowed more investors to get access to our content and the investment opportunities in our network. We will continue to focus on
      virtual events. If you are interested in engaging or hiring TBLI to organise and curate an in-person or an online event for you, you can contact us.
    </p>
  </div>
  <div class="timeline-info" id="service-4">
    <h3>FOUNDATION</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut ero labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.Lorem ipsum dolor sit Ut enim ad minim veniam, quis nostrud exercitation
      ullamco.Lorem ipsum dolor sit
    </p>
  </div>
  <div class="timeline-info" id="service-5">
    <h3>TBLI CAPITAL CONNECT</h3>
    <p>
      TBLI Capital Connect is our matchmaking system where we connect funds and projects to our network of investment allocators. The algorithm matches investors to investment opportunities according to the their investment profile and vice versa. Funds & companies
      looking to raise funds will be able to be connected to impact investors that invest regularly in their industry. A very efficient way of fundraising.
    </p>
  </div>
</div>

​