在另一個元素上懸停時更改div內容

Question

在過去的幾天里，我一直在摸索，基本上，我要使用的功能是：我有一個具有7個<li>元素的<ul> ，然后又有一個具有7個<p>元素的部分。 我要尋找的是，當我將鼠標懸停在<li>元素之一上時，它將放置來自相應<p>元素的文本。 問題是我無法直接播放文本或通過jQuery進行插入，因為<p>中的內容是對yaml文件的引用。 我隱藏了所有元素，除了第一個應該出現在頁面加載中的元素，然后我猜想有一種方法可以隱藏<p>並僅顯示相應的元素。 提前致謝！ 請找到隨附的代碼段：

 <section class="container clearfix"> <div class="text-center"> <ul class="solutions-items"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </section> <section class="container clearfix"> <div class="text-center solutions-text-p"> <p class="">{% yaml reference %}</p> <p class="hidden">{% yaml reference %}</p> <p class="hidden">{% yaml reference %}</p> <p class="hidden">{% yaml reference %}</p> <p class="hidden">{% yaml reference %}</p> <p class="hidden">{% yaml reference %}</p> <p class="hidden">{% yaml reference %}</p> <button class="solutions-learnmore-btn">{% yaml reference %}</button> </div> </section> 

Answer 1

如果您想在懸停li時顯示相應的p ，則可以通過索引或將它們與data-*屬性相關聯來實現。

這是一個按索引的示例：

• 我們將mouseenter掛接到委托中，以便僅在事件與li之一相關時才接收該事件。
• 當我們得到事件時，我們得到該li相對於其同級的索引
• 然后，我們在solutions-text-p div抓取這些段落，確保它們都具有hidden類，然后將其從與li具有相同索引的那一部分中刪除。

實時復制 -為了清楚起見，我使jQuery部分相當冗長：

 $(".solutions-items").on("mouseenter", "li", function() { var index = $(this).index(); var paras = $(".solutions-text-p p"); paras.addClass("hidden"); paras.eq(index).removeClass("hidden"); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="container clearfix"> <div class="text-center"> <ul class="solutions-items"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> <li>Sixth</li> <li>Seventh</li> </ul> </div> </section> <section class="container clearfix"> <div class="text-center solutions-text-p"> <p class="">First</p> <p class="hidden">Second</p> <p class="hidden">Third</p> <p class="hidden">Fourth</p> <p class="hidden">Fifth</p> <p class="hidden">Sixth</p> <p class="hidden">Seventh</p> <button class="solutions-learnmore-btn">{% yaml reference %}</button> </div> </section> 

這是一個不太冗長的jQuery版本：

$(".solutions-items").on("mouseenter", "li", function() {
  $(".solutions-text-p p")
      .addClass("hidden")
      .eq($(this).index())
          .removeClass("hidden");
});

Answer 2

您可以使用鼠標的enter事件和懸停元素的索引來顯示/隱藏目標元素

 var $ps = $('.solutions-text-p p') $('.solutions-items li').mouseenter(function() { var $cur = $ps.eq($(this).index()).show(); $ps.not($cur).hide(); }) 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="container clearfix"> <div class="text-center"> <ul class="solutions-items"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> </section> <section class="container clearfix"> <div class="text-center solutions-text-p"> <p class="">1</p> <p class="hidden">2</p> <p class="hidden">3</p> <p class="hidden">4</p> <p class="hidden">5</p> <p class="hidden">6</p> <p class="hidden">7</p> <button class="solutions-learnmore-btn">{% yaml reference %}</button> </div> </section> 

Answer 3

 $('.solutions-items li').mouseenter(function() { $("#show_data").text($(this).data("text")); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section class="container clearfix"> <div class="text-center"> <ul class="solutions-items"> <li data-text="bla_1">1</li> <li data-text="bla_2">2</li> <li data-text="bla_3">3</li> <li data-text="bla_4">4</li> <li data-text="bla_5">5</li> <li data-text="bla_6">6</li> <li data-text="bla_7">7</li> </ul> </div> </section> <section class="container clearfix"> <div class="text-center solutions-text-p"> <p id="show_data"></p> <button class="solutions-learnmore-btn">{% yaml reference %}</button> </div> </section>