Saya memiliki paragraf dan jangkar, ketika saya mengarahkan kursor ke paragraf, jangkar memudar, bagaimana saya bisa menyimpannya sebentar sehingga saya bisa mengkliknya? karena ketika saya memindahkan mouse dari elemen p itu menghilang dan saya tidak bisa mengkliknya, ini kode saya:

$(function() {
  $('p').hover(function() {
    $('a').fadeIn();
  }, function() {
    $('a').css('display','none');
  });
});
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>
0
jessica 13 November 2017, 00:14
1
Bagaimana jika Anda meletakkan <a> di dalam <p>, maka Anda tidak akan memicu unhover dengan mengarahkan mouse ke a. Ada beberapa cara lain untuk melakukannya tetapi itu mungkin yang paling sederhana, jika dapat diterima.
 – 
James
13 November 2017, 00:19
Anda perlu memikirkan kembali sintaks html Anda. Menggunakan jquery untuk masalah khusus ini bukanlah solusi. CSS adalah semua yang Anda butuhkan.
 – 
Matt
13 November 2017, 00:39
Bisa tolong beri saya contoh?
 – 
jessica
13 November 2017, 00:45

5 jawaban

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>
2
therealbischero 13 November 2017, 00:25

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>
2
Community 20 Juni 2020, 12:12

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

1
jburtondev 13 November 2017, 00:18
Bagaimana jika saya memiliki beberapa elemen di halaman ini dengan fungsi yang sama? ketika saya mengarahkan ke salah satu dari mereka itu mengakhiri sesi waktu untuk yang dibuka, apakah itu mungkin?
 – 
jessica
13 November 2017, 00:24
Keren, pasti. Itu mungkin menggunakan metode clearTimeout, Anda harus menjalankan clearTimeout setelah elemen baru diklik.
 – 
jburtondev
13 November 2017, 00:29
Bisakah kamu melakukannya untukku?
 – 
jessica
13 November 2017, 00:30
Saya akan merekomendasikan jawaban terbaru, berdasarkan apa yang dikatakan James. Ini lebih bersih.
 – 
jburtondev
13 November 2017, 00:36

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.

1
Shiladitya 13 November 2017, 07:17

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(); 
      });

    });
    });
});
1
A.D. 13 November 2017, 07:26