如何根据当前悬停的元素隐藏和显示元素？

Question

我们需要能够根据当前悬停的元素隐藏和显示元素。我们在下面尝试了以下方法，但它没有添加 is-active 类并根据悬停的其他元素将其删除。

我们如何根据当前悬停的元素隐藏和显示元素？

目标（基于以下示例）：

1. 当您将鼠标悬停在first 下的some 上时，使用is-active 类显示<div class="two" id="some-link">some link</div>
2. 当您将鼠标悬停在first 下的path 上时，<div class="two" id="some-link">some linke</div> 不应显示（删除is-active 类），<div class="two" id="path-link">path link</div> 应显示（添加is-active 类）

当前问题：

1. is-active 悬停元素更改时不会删除类

$(function() {
  $('li#two').hover( function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    var el_parent = el_two.parent().parent();
    el_parent.find('.is-active').removeClass('is-active');
    $(el_sel).addClass('is-active');
  });
});

.two {
  display: none;
}
.is-active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li id="one">
    <a href="#"> first</a>
    <div class="one">
      <ul>
        <li data-at="some-link" id="two">
          <a href="#"> some</a>
        </li>
        <li data-at="path-link" id="two">
          <a href="#"> path</a>
        </li> 
        <li data-at="another-one" id="two">
          <a href="#"> another one</a>
        </li> 
      </ul>
      <div class="dropdown">
        <div class="two" id="some-link">some link text</div>
        <div class="two" id="path-link">path link</div>
        <div class="two" id="another-one">another one</div>
      </div>
    </div>
  </li>
  <li id="one">
    <a href="#"> second</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> another some</a>
        </li>
        <li>
          <a href="#"> another path</a>
        </li>  
      </ul>
    </div>
  </li>
  <li id="one">
    <a href="#"> third</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> third some</a>
        </li>
        <li>
          <a href="#"> third path</a>
        </li>  
      </ul>
    </div>
  </li> 
</ul>

Answer 1

首先您的.find() 使用了错误的选择器。你有find('is-active')，这是一个元素名称选择器，你想要一个css类选择器，即.is-active。

el_parent.find('.is-active').removeClass('is-active');

removeClass() 的注意事项，您不使用 css 选择器，您只使用类名，因此在该调用中不需要点

现在，如果您还希望在将鼠标悬停在元素外时也删除该类，那么您需要为此添加一个事件侦听器，并从那里调用 removeClass。 .hover() 使用第二个参数来设置此类事件侦听器回调。

$('li#two').hover(onHoverCallback,function(){
  //code for finding the right element
  $(el_sel).removeClass('is-active');
})

---

$(function() {
  $('li#two').hover( function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    var el_parent = el_two.parent().parent();
    el_parent.find('.is-active').removeClass('is-active');
    $(el_sel).addClass('is-active');
  },function(){
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    $(el_sel).removeClass("is-active");
  });
});

.two {
  display: none;
}
.is-active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li id="one">
    <a href="#"> first</a>
    <div class="one">
      <ul>
        <li data-at="some-link" id="two">
          <a href="#"> some</a>
        </li>
        <li data-at="path-link" id="two">
          <a href="#"> path</a>
        </li> 
        <li data-at="another-one" id="two">
          <a href="#"> another one</a>
        </li> 
      </ul>
      <div class="dropdown">
        <div class="two" id="some-link">some link text</div>
        <div class="two" id="path-link">path link</div>
        <div class="two" id="another-one">another one</div>
      </div>
    </div>
  </li>
  <li id="one">
    <a href="#"> second</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> another some</a>
        </li>
        <li>
          <a href="#"> another path</a>
        </li>  
      </ul>
    </div>
  </li>
  <li id="one">
    <a href="#"> third</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> third some</a>
        </li>
        <li>
          <a href="#"> third path</a>
        </li>  
      </ul>
    </div>
  </li> 
</ul>