Can't figure out how to use $(this) correctly in jQuery to get hovered element

So I have several DIVs called achievement, and each one contains a span called recent-share. WHat I would like to do is have each recent-share hidden at first, and the have it appear when the parent 'acheivement' class is hovered. I'm trying to use $(this) to get it, but it won't work. I'm assuming this is a syntax error or something, and any help would be appreciated!

<script>
    $(".recent-share").hide();
    $('.achiev开发者_C百科ement').hover(
        function ()) {
            $(this).next(".recent-share").show();
          });

  </script>

---

Try:

$( ".achievement" ).hover( function() {
    $( this ).find( ".recent-share" ).show();
});

Also you had a syntax error – it should be function () {, not function()) {.

---

.next() targets a sibling. Try:

<script>
    $(".recent-share").hide();
    $('.achievement').hover(
        function ()) {
            $(this).find(".recent-share").show();
          });

  </script>

---

Maybe try one of thes 3 ways:

1. children() lookup

$(this).children('.recent-share') 

2. context lookup

  $('> .recent-share',this) 

3. find()

$(this).find('> .recent-share') // is basically the same as nº2 

Not tested, had this in my snippets.