jquery - JQUERY:父选择器不起作用

$(document).ready(function() {
  $(".lvl_0 ul").mouseover(function() {
    $(".subnav:parent > a span").addClass("subOpen");

  });

  $(".lvl_0 ul").mouseout(function() {

    $(".subnav:parent > a span").addClass("subOpen");

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tile_nav">
  <li class="lvl_0">
    <a href="#">Tile
      <span>---</span>
    </a>

    <ul class="subnav">
      <li><a href="#">XXXXX <span>---</span></a>
      </li>
      <li><a href="#">XXXXX <span>---</span></a>
      </li>
    </ul>

  </li>

  <li class="lvl_0"><a href="#">Tile</a>
  </li>
  <li class="lvl_0"><a href="#">Tile</a>
  </li>
</ul>

请帮忙，为什么这个:parent选择器不能与直接子代一起使用。将鼠标移到子<ul>上时，应向父级<span>的<li>添加一个类

最佳答案

使用parent()获取父元素：

$(document).ready(function () {
    $(".lvl_0 ul").mouseover(function () {
        $(this).parent().children('a').addClass("subOpen");

    });

    $(".lvl_0 ul").mouseout(function () {

        $(this).parent().children('a').addClass("subOpen");
    });
});

您也可以使用hover

$(document).ready(function () {
    $(".lvl_0 ul").hover(function () {
        $(this).parent().children('a').addClass("subOpen");
    }, function () {
        $(this).parent().children('a').removeClass("subOpen");
    });
});