javascript - 元素像亚马逊帮助页面一样保持悬停

Question

我想做类似亚马逊帮助页面的东西：

https://www.amazon.fr/gp/help/customer/display.html/ref=nav_cs_help?ie=UTF8&nodeId=508510#nav-top

当鼠标在某一类时，我们可以在右侧看到关注内容

我的代码几乎可以工作，但是，当我的鼠标离开链接时，右 div 不再处于活动状态

有我的代码：

网页：

<div class="activity--js margin-card activity-card card card-body">

<div class="row">
<div class="col-3 help__titles-part">

<% @helps.each do |help|%>

<p class="help__title" data-id='<%=help.id %>'><%=help.title%></p>   
<%end%>
</div>

<div class="col-9 help__contents-part" >
    <div class="row">
    <% @helps.each do |help|%>

        <div class="col-12 help__content-<%=help.id %>" style="display:none">
            <p><%=help.content%></p>   
        </div>
    <%end%>

    </div>
</div>
</div>

</div>

JS：

$('.help__title').hover(
    function () {
         $(this).toggleClass('help__title-active');
         Id = $(this).data("id");
         console.log(Id);
         $('.help__content-' + Id).toggleClass('help__content-active');
        });

标签： javascriptjqueryhtmlhover

Answer 1

您要求它像亚马逊示例一样，它使用 mouseenter 事件，而不是单击，也绝对不是悬停。

jQuery(document).ready(function($){
  
  $('.help__title').mouseenter(function(){
    $('.help__title-active').removeClass('help__title-active');
    $('.help__content-active').removeClass('help__content-active');
    $(this).addClass('help__title-active');
    Id = $(this).attr("data-id");
    $('.help__content-' + Id).addClass('help__content-active');
  });
  
});

.help__title-active{font-weight:bold; color:red}
.help__content-active{display:block !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="activity--js margin-card activity-card card card-body">

  <div class="row">
    <div class="col-3 help__titles-part">
      <p class="help__title" data-id='1'>Title 1</p>   
      <p class="help__title" data-id='2'>Title 2</p>   
      <p class="help__title" data-id='3'>Title 3</p>   
      <p class="help__title" data-id='4'>Title 4</p>   
    </div>
======================================================================
    <div class="col-9 help__contents-part" >
      <div class="row">
        <div class="col-12 help__content-1" style="display:none">
          <p>Help 1</p>   
        </div>
        <div class="col-12 help__content-2" style="display:none">
          <p>Help 2</p>   
        </div>
        <div class="col-12 help__content-3" style="display:none">
          <p>Help 3</p>   
        </div>
        <div class="col-12 help__content-4" style="display:none">
          <p>Help 4</p>   
        </div>
      </div>
    </div>
    
</div>