使元素悬停时取消悬停,添加关闭按钮,使其记住cookie
Make element hover when unhovering, add close button so it remembers cookies?
我正在尝试制作一个工具提示,但是我需要它在用户移开时保持悬停。
另外,我正在尝试添加一个关闭按钮的工具提示,这将保持"悬停状态",当用户点击它,我想让它记住cookie,所以它不会再次打开cookie。
我是一个javascript和jQuery的新手,这几天我一直在纠结这个问题。
下面是我的代码:@charset "utf-8";
/* Tooltip CSS Created By Deni*/
.tooltip-container {
width: 400px;
height: 300px;
background: #DBDBDB;
border: 1px solid black;
margin: 10% auto;
}
/* Start the tooltip css */
.tooltip {
position: relative;
z-index: 9998;
cursor: help;
}
.tooltip > span {
display: none;
}
.tooltip:hover {
z-index: 9999;
}
.tooltip:hover .tooltip-data {
display: block;
width: 150px;
padding: 5px;
color: #dadada;
background-color: #A35FA1;
font-size: 11px;
border-radius: 5px;
text-decoration: none;
font-family: century gothic;
position: absolute;
bottom: 20px;
left: -10px;
text-align: center;
}
.tooltip-container > a {
margin-right: 10px;
}
.permhover {
display: block;
opacity: 1;
}
**HTML:**
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tooltip</title>
<link href="tooltip.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
</head>
<body>
<div class="tooltip-container">
<a href="javascript:;" class="tooltip">This is the information<span class="tooltip-data"> This is one Tooltip!</span></a>
<a href="javascript:;" class="tooltip">This is the information <span class="tooltip-data"> This another one Tooltip!</span></a>
</div>
</body>
</html>
我知道这不是很多,但所有的帮助是感激的。非常感谢。
首先你需要改变css中的所有行从"。工具提示:hover"变为". Tooltip .hover"。接下来,您需要将<button class="btn-close"></button>
添加到工具提示中(此按钮将关闭此工具提示)
然后你需要添加jquery代码,这将添加类hover到工具提示当你悬停。
(function(){
$('.tooltip').each(function(){
var tooltip = $(this);
var tooltipId = tooltip.attr('id');
if( !getCookie(tooltipId) ) {
tooltip.on('mouseenter.tooltip', function(){
tooltip.addClass('hover');
tooltip.find('.btn-close').on('click', function(){
var date = new Date();
date.setDate(date.getDate() + 1);
tooltip.removeClass('hover').off('mouseenter.tooltip');
document.cookie = tooltipId + "=true; path=/; expires=" + date.toUTCString();
});
});
}
});
function getCookie(name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/(['.$?*|{}'(')'[']'''/'+^])/g, '''$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
})();
一个可能的解决方案是在链接上注册onmouseout事件并显示您的工具提示
您可以通过在.tooltip-data
上添加span
来添加x。
然后使用jQuery激活鼠标悬停的工具提示,并通过点击x span来删除它。
$(function() {
$('.tooltip').on('mouseover', function() {
$(this).find('span').show().append('');
});
$('.tooltip-data span').on('click', function() {
$(this).parent().hide();
});
});
@charset "utf-8";
/* Tooltip CSS Created By Deni*/
.tooltip-container {
width: 400px;
height: 300px;
background: #DBDBDB;
border: 1px solid black;
margin: 10% auto;
}
/* Start the tooltip css */
.tooltip {
position: relative;
z-index: 9998;
cursor: help;
}
.tooltip > span {
display: none;
}
.tooltip:hover {
z-index: 9999;
}
.tooltip-data {
display: block;
width: 150px;
padding: 5px;
color: #dadada;
background-color: #A35FA1;
font-size: 11px;
border-radius: 5px;
text-decoration: none;
font-family: century gothic;
position: absolute;
bottom: 20px;
left: -10px;
text-align: center;
}
.tooltip-data span {
float: right;
}
.tooltip-container > a {
margin-right: 10px;
}
.permhover {
display: block;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip-container">
<a href="javascript:;" class="tooltip">
This is the information
<span class="tooltip-data"> This is one Tooltip! <span> x </span></span>
</a>
<a href="javascript:;" class="tooltip">
This is the information
<span class="tooltip-data"> This another one Tooltip!<span> x </span></span>
</a>
</div>
相关文章:
- 当鼠标悬停在文本中的单词上时显示警报
- 在jquery中为显示/隐藏设置cookie
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 手风琴可点击并悬停
- 按下按钮时保存cookie
- 悬停功能触发器
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- css(或jQuery)悬停时淡入淡出
- jquery快速悬停问题
- 如何在悬停时流畅地更改单词
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 如何在Analytics.js中始终了解最新的cookie过期时间
- php httponly cookie在浏览器关闭时被删除
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 通过检查cookie动态更改jQuery“悬停”
- 使元素悬停时取消悬停,添加关闭按钮,使其记住cookie