```js
$(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");

  });
});
```

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

Please help, why this `:parent` selector not working with direct child. on mouse over of sub `<ul>` should add a class to `<span>` of parent `<li>`