Klik pada elemen setelah memudar di hover

Seperti yang dikatakan dalam salah satu komentar James, ini (saya pikir) cara yang benar

$(function() {
  $('p').hover(function (){
    $(this).children('a').fadeIn()
  }, function (){
    $(this).children('a').fadeOut()
  })
})

a {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello!<br>
  <a href="#">A Link!</a>
</p>

Jika Anda perlu menganimasikan hal-hal kecil seperti menu tarik-turun atau tautan yang memudar, Anda harus menggunakan CSS. Lebih mudah untuk menulis, dan browser modern dioptimalkan untuk menjalankan animasi CSS menggunakan GPU (ini adalah CPU untuk grafis).

Demo ini hanya menggunakan CSS:

• @keyframes untuk transisi yang lebih halus memudar masuk dan keluar dengan nilai opacity
• pointer-events untuk mengontrol perilaku tautan. Dalam demo ini, tautan hanya akan muncul jika paragraf diarahkan ke atas.
• padding dan batas paragraf dan tautan menyentuh. Desain ini memungkinkan pengguna untuk memindahkan mouse ke link tanpa gangguan dari hover. Ada garis putus-putus untuk menunjukkan area hover saja, itu untuk demo dan opsional.

Demo

* {
  margin: 0;
  padding: 0;
}

body {
  font: 700 18px/1.2 Verdana;
}

a {
  display: block;
  padding: 1em .5em;
  border: 0 none rgba(0, 0, 0, 0);
  pointer-events: none;
  cursor: default;
  animation: out;
  opacity: 0;
  transition: all 0s, opacity 4s ease;
}

p {
  margin-top:30px;
  padding: .5em
}

p:hover+a,
a:hover {
  border: 1em;
  pointer-events: auto;
  cursor: pointer;
  animation: in;
  opacity: 1;
  transition: all 0s, opacity 2s ease;
}

@keyframes in {
  0% {
    opacity: 0
  }
  33% {
    opacity: .33
  }
  66% {
    opacity: .66
  }
  100% {
    opacity: 1
  }
}

@keyframes out {
  0% {
    opacity: 1
  }
  33% {
    opacity: .66
  }
  66% {
    opacity: .33
  }
  100% {
    opacity: 0
  }
}

a {
  outline: 1px dashed red
}
p {
  outline: 1px dashed blue
}

<p>Show anchor</p>
<a href="#">Hi</a>

Gunakan fungsi setTimeOut(). Saya telah menerapkan ini ke dalam kode Anda: https://jsfiddle.net/kxt547zp/

Ini dia solusinya https://jsfiddle.net/k8jkvbp5/

$('p').hover(function() {
  $(this).next('a').fadeIn();
}, function() {
  $(this).next('a').fadeOut();
});

a{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Show anchor</p>
<a href="#">Hi</a>

Saya telah menggunakan jQuery next bersama dengan fadeIn / fadeOut

Semoga ini bisa membantu Anda.

Anda dapat melakukannya dengan banyak cara seperti animasi dan penundaan. di sana saya menggunakan delay untuk mengatasi masalah Anda semoga ini membantu Anda.

$(function() {
   $('p').hover(function() {
        $('a').fadeIn();
    }, function() {

       $('a').delay(800).queue(function (next) { 

            $(this).css('display', 'none'); 
         next(); 
      });

    });
    });
});