Question

我有一个段落和一个锚点，当我徘徊在段落中时，锚点会消失，我怎么能保持它一段时间才能点击它？因为当我将鼠标移离p元素时它会消失，我无法点击它，这是我的代码：

$(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>

Answer 1

如詹姆斯的评论中所述，这是（我认为）正确的方式

＆＃13;

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

＆＃13;

a {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

如果您需要为下拉菜单或淡化链接等次要内容制作动画，则应使用CSS。它更容易编写，现代浏览器经过优化，可以使用GPU运行CSS动画（它是一个用于图形的CPU）。

此演示仅使用CSS：

@keyframes用于使用不透明度值淡入淡出过渡
pointer-events以控制链接的行为方式。在此演示中，仅当段落悬停时才会显示该链接。
段落和链接的填充和边框正在触及。此设计允许用户将鼠标移动到链接而不会中断悬停。有虚线轮廓仅显示悬停区域，它们用于演示并且是可选的。

演示

* {
  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>

Answer 3

使用setTimeOut()功能。我已在您的代码中实现了这一点：https://jsfiddle.net/kxt547zp/

Answer 4

您可以使用解决方案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>

我已使用jQuery next以及fadeIn / fadeOut

希望这会对你有所帮助。

Answer 5

你可以通过动画和延迟等多种方式来实现。在那里，我使用delay来解决您的问题，这可能会对您有所帮助。

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

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

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

    });
    });
});

在悬停时淡入后单击元素

5 个答案:

演示