在另一个元素上悬停时更改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>