如何隐藏和显示基于当前悬停元素的元素？

Question

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

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

目标（基于以下示例）：

1. 当你在some下悬停在first上时，使用<div class="two" id="some-link">some link</div>类显示is-active
2. 当你在qazxsw poi下悬停在qazxsw poi上时，qazxsw poi不应该显示（删除path类），并且first应该显示（添加<div class="two" id="some-link">some linke</div>类）

目前的问题：

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

<div class="two" id="path-link">path link</div>

is-active

is-active

Answer 1

首先你的

$(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;
}

这是一个元素名称选择器，你想要一个css类选择器，即

<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>

。

.find()

注意find('is-active')你不使用css选择器你只是使用类名，因此为什么你不需要该调用中的点

现在，如果你想在将鼠标悬停在元素上的同时删除它，那么你需要为它添加一个事件监听器，并从那里调用removeClass。 .is-active使用第二个参数来设置这样的事件监听器回调。

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

---

removeClass()

.hover()

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