1）我使用了Jquery hide()和show()函数。
2）我写的是内联样式display:none，而不是visibility:hidden。
3）我将timeout设置为2秒后隐藏文本。
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
/* visibility: hidden; */
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity:1;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<table style="margin-top: 50px;margin-left: 50px;" cellpadding="10" cellspacing="10">
<tr>
<td><div class="popup" onclick="myFunction(1)">Click me! <span class="popuptext" id="myPopup1" style="display: none;">Popup text...</span> </div></td>
</tr>
<tr>
<td><div class="popup" onclick="myFunction(2)">Click me! <span class="popuptext" id="myPopup2" style="display: none;">Popup text...</span> </div></td>
</tr>
</table>
<script>
// When the user clicks on <div>,open the popup
function myFunction(id) {
$("#myPopup"+id).show();
setTimeout(function(){
$("#myPopup"+id).hide();
},2000);
}
</script>
</body>
</html>
,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity:1;
}
}
</style>
</head>
<body>
<table style="margin-top: 50px;margin-left: 50px;" cellpadding="10" cellspacing="10">
<tr>
<td><div class="popup" onclick="myFunction(1)" onmouseout="myFunction2(1)">Click me! <span class="popuptext" id="myPopup1">Popup text...</span> </div></td>
</tr>
<tr>
<td><div class="popup" onclick="myFunction(2)" onmouseout="myFunction2(2)">Click me! <span class="popuptext" id="myPopup2">Popup text...</span> </div></td>
</tr>
</table>
<script>
// When the user clicks on <div>,open the popup
function myFunction(id) {
var popup = document.getElementById("myPopup"+id);
popup.classList.toggle("show");
}
function myFunction2(id) {
var popup = document.getElementById("myPopup"+id);
popup.classList.toggle("hide");
}
</script>
</body>
</html>
,
由于您使用jQuery标记了问题，因此我将提供使用它的答案。但是首先，您需要稍微更改html。
您可以包装“单击我！”使其可以接收点击事件。如果没有发生mouseover，我们可以使用jQuery data（）函数添加一个在2秒后触发的计时器。使用data()会将计时器仅附加到单击的元素。
我也注释了代码以了解该过程。
查看此代码：
$(document).ready(function() {
jQuery(".link").on("click",function() {
let popup = jQuery(this).siblings('.popuptext');
popup.toggleClass("show");
// Check the current staet of the link span
if (popup.hasClass("show")) {
// Set timout if the popup is shown to remove it in two seconds
const popupTimeout = setTimeout(() => {
popup.removeClass("show");
},2000);
popup.data("timeout",popupTimeout)
} else {
// Clear popup timeout if the popup is hidden
clearTimeout(popup.data("timeout"));
}
});
// If use hovers over the poup then clear timeout and keep the popup
jQuery(".popup").on("mouseenter",".popuptext.show",function() {
let popupText = jQuery(this);
let timeout = popupText.data("timeout");
clearTimeout(timeout);
});
// if user moves mouse away we hide the poup
jQuery(".popup").on("mouseleave",function() {
jQuery(this).removeClass("show");
});
});
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="margin-top: 50px;margin-left: 50px;" cellpadding="10" cellspacing="10">
<tr>
<td>
<div class="popup">
<span class='link'>Click me!</span>
<span class="popuptext" id="myPopup1">
<a href="Link 1">Link 1</a> | <a href="link2">Link 2</a>
</span> </div>
</td>
</tr>
<tr>
<td>
<div class="popup">
<span class='link'>Click me!</span>
<span class="popuptext" id="myPopup2">Popup text...</span> </div>
</td>
</tr>
</table>
本文链接：https://www.f2er.com/3096351.html
