Question

Codepen Demo

这里我在jquery上使用了悬停功能。它工作正常。但我需要在悬停div上选择li。

$('.block-templates-container:not(:first-child)').hide();
   $(".block-name").each(function() {
      $(this).hover(function() {    
         $('.block-templates-container').hide();
         var getId = $(this).attr('id');
         $('.block-templates-container#' + getId + '_show').show();    
      });    
    });

当我将鼠标悬停在右侧区块（标题设计，内容设计）时，li未被选中。如何解决这个问题？

Answer 1

尝试在悬停时添加课程

  //Sidebar 
  $('.block-templates-container:not(:first-child)').hide();
      $(this).hover(function() {
          $('.block-templates-container').hide();
          var getId = $(this).attr('id');
          $('.block-templates-container#' + getId + '_show').show();

          $('.block-name').not(this).removeClass('current');
          $(this).addClass('current');
      });
  });

Answer 2

试试这个：您不需要使用.each()然后将鼠标悬停。也不需要使用类选择器withid，你可以直接使用id选择器（id必须是通过DOM的唯一） - 见下面的代码

$(".block-name").hover(function() {
    $('.block-templates-container').hide();
    var getId = $(this).attr('id');
    $('#' + getId + '_show').show();
});

如何在jquery中添加当前类选择的div

Codepen Demo

2 个答案: