服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > 开发教程 > JavaScript教程 >

使用JS实现Tooltip效果

时间:2016-01-15 17:26来源:未知 作者:最模板 点击:
Tooltip的实现分为两步,第一步:使用CSS实现Tooltip静态样式;第二步:使用JS实现鼠标划过显示,鼠标离开隐藏。 上次发了使用CSS实现Tooltip静态样式,详情戳进:使用CSS实现Tooltip静态三

Tooltip的实现分为两步,第一步:使用CSS实现Tooltip静态样式;第二步:使用JS实现鼠标划过显示,鼠标离开隐藏。

上次发了使用CSS实现Tooltip静态样式,详情戳进: 使用CSS实现Tooltip静态三角样式

下面将第二步JS操作奉上

开始正文

在进行JS操作之前,我先将HTML代码贴上来,方便查看DIV布局

<img id="about" src="public/images/about.png">
<div id="tooltip" class="tooltip-hidden">
    <div class="triangle"></div>
    <div class="square">进入首页</div>
</div>

在这里,我们在CSS中定义了两个DIV标签,一个DIV为 tooltip-hidden ,将其中样式定义为 display:none; 然后将该样式默认赋给Tooltip,即让Tooltip默认隐藏。一个DIV为 tooltip-show ,将其中样式定义为 display:block; 即,当Tooltip所在DIV的class值为 tooltip-show 时,让tooltip显示。代码如下:

.tooltip-hidden{
    		display: none;
    }
.tooltip-show{
    display: block;
    }

在实现Tooltip的显示与隐藏时,重点在于JS对鼠标事件的监听,在这里,我们主要监听两个事件,一个是鼠标划过事 件 onmouseover 和鼠标离开事件 onmouseout。当使用JS监听到 onmouseover 事件时,我们使用JS中的 className 操作为Tooltip的DIV修改其DIV属性,将默认的 tooltip-hidden 属性修改为 tooltip-show ,即可实现tooltip的显示。 同样的,当鼠标监听到 onmouseout 事件时,将tooltip-show 属性修改为 tooltip-hidden 即可。 代码如下:

var tip= document.querySelector("#tooltip");
var about = document.querySelector("#about");
about.onmouseenter = function(){
  console.log("show");
  tip.className = "tooltip-show";
};
about.onmouseout = function(){
  console.log("hidden");
  tip.className = "tooltip-hidden";
}

问题来了

当我们在使用JS监听 onmouseover 以及 onmouseout 时,会发现一个问题,当我们的鼠标在 #about 这张图片上 滑动时,会出现Tooltip一直闪动的问题。

为何这样

出现闪动问题的原因在于JS的冒泡事件,因为 onmouseover 以及 onmouseout 都拥有冒泡属性,当我们的鼠标 划过 #tooltip 或者它的所有子元素,都会触发onmouseover 事件, onmouseout 同样,所以当你在图片上滑 动,但鼠标焦点并没有出图片的范围却出现一直不停的触发 onmouseover 和 onmouseout 事件。

如何解决它

这个问题的解决,在不同浏览器中需要使用不同的方式来解决,下面先简单说说 IE浏览器 的解决方法。 IE浏览器的解决方式比较简单,只需要更换两个监听的事件即可,将 onmouseover 事件更换成 onmouseenter 事 件,将 onmouseout 事件更换为 onmouseleave 事件即可解决。但是在 Chrom e以及 firefox 浏览器中却不能解决, 这里我们先不说如何解决,大家可以先自行尝试。待到某花烂漫时,我便来说它。

(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容