鼠标悬停和时间隐藏div弹出窗口

有人能帮忙建议添加到这个解决方案中所需的代码吗？我用这个解决方案创建了一个弹出窗口？W3创建弹出div 教程

我想在重复的表条目上使用它，但所有弹出窗口在单击时都保持打开状态。我希望它们在鼠标离开弹出窗口时消失，或者在一段时间后(比如2秒(，如果鼠标没有真正越过它。或者，当点击另一个弹出窗口时，它会隐藏其他弹出窗口。

我要回到这个解决方案，我已经尝试并调整了其他一些解决方案，这些解决方案在测试页面上有效，但在应用到我的主php循环页面时却不起作用，因为肯定有一些冲突的代码需要更多的时间来识别。然而，这个弹出的例子确实出现了。

<!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)">Click me! <span class="popuptext" id="myPopup1">Popup text...</span> </div></td>
</tr>
<tr>
<td><div class="popup" onclick="myFunction(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");
}
</script>
</body>
</html>

1(我使用了Jqueryhide()和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。

你可以用一个跨度包装"点击我！"，使其接收点击事件。我们可以使用jQuery data((函数添加一个计时器，如果mouseover没有发生，该计时器将在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", ".popuptext.show", 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>

相关内容

最新更新

热门标签：