Question

这是我的HTML

<a class='dropdown-button'></a>
<ul class='dropdown-content'>
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>

<a class='dropdown-button'></a>
<ul class='dropdown-content'>
  <li><a href="#">forth</a></li>
  <li><a href="#">fifth</a></li>
  <li><a href="#">sixth</a></li>
</ul>

当ul中的li中的一个悬停时，我想选择a。例如，当a悬停时选择第二个fifth，而当a悬停时选择第一个Third。我不能用CSS做到这一点，对吧？

Answer 1

鉴于提供的html，选择较高的a可以通过以下方法实现：

$("li>a").on("mouseover", function() { 
    $(this).closest("ul").prev("a").addClass("active"); 
});

工作片段：

$("li>a").on("mouseover", function() { 
    $(this).closest("ul").prev("a").addClass("active"); 
}).on("mouseout", function() {
    $(".dropdown-button").removeClass("active");
});

.active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='dropdown-button'>Section 1</a>
<ul class='dropdown-content'>
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>

<a class='dropdown-button'>Section 2</a>
<ul class='dropdown-content'>
  <li><a href="#">forth</a></li>
  <li><a href="#">fifth</a></li>
  <li><a href="#">sixth</a></li>
</ul>

我应该添加关于.prev("a")的 caveat -.prev将始终精确选择前一个元素，因此此代码也可以是.closest("ul").prev()...。它不会与.closest做相同的工作，而.prev(selector)会继续在树上查找匹配的选择器-a将获得前一个元素，然后适用选择器。如果在ul和[DataContract] [KnownType(typeof(Bla1))] public class Bla { [DataMember] public int id; public Bla(int id) { this.id = id; } }之间添加了另一个元素，则该元素将停止工作（并且可以使用其他方法（例如父分组）更好地实现）。

当孩子悬停时选择父母

1 个答案: