js鼠标显示文字,js鼠标选中的文字加样式

本文目录一览：

• 1、JS中如何实现鼠标悬停在按钮上显示文字
• 2、js鼠标悬停显示文字实例
• 3、用javascript 当鼠标移动到任意文字上弹出框显示文字内容，不是加title属性
• 4、js鼠标移动至图片上，出现文字鼠标移开文字隐藏代码
• 5、js鼠标悬停显示文字的实例介绍？

JS中如何实现鼠标悬停在按钮上显示文字

不用JS事件，如果只是简单文字的话给标签加title属性就OK了例：input type=”button” title=”你要的文字” /

js鼠标悬停显示文字实例

一、首先需要div布局：

!DOCTYPE html

html lang=”en”

head

meta charset=”UTF-8″

titlejs悬停/title

style type=”text/css”

p {

width: 200px;

height: 200px;

background-color: skyblue;

text-align: center;

line-height: 200px;

}

/style

/head

body

p id=”txt”我是一个DIV/p

script type=”text/javascript”

var txt = document.getElementById(‘txt’);

txt.setAttribute(“title”,”鼠标悬停了”);

/script

/body

/html

二、div实在的在开发工具里面的代码效果如下截图：

三、这段代码最主要的重点是如下：

script type=”text/javascript”

var txt = document.getElementById(‘txt’);

txt.setAttribute(“title”,”鼠标悬停了”);

/script

四、实际代码在浏览器的渲染如下：

用javascript 当鼠标移动到任意文字上弹出框显示文字内容，不是加title属性

(function (document) {

var ttel = document.createElement(‘span’);

ttel.style.position = ‘absolute’;

ttel.style.boder = ‘1px solid #e1dec9’;

ttel.style.backgroundColor = ‘#eae9e3’;

ttel.style.left = ‘0px’;

ttel.style.top = ‘0px’;

ttel.style.fontSize = ‘8pt’;

ttel.style.padding = ‘2px 4px 2px 4px’;

ttel.style.zIndex = 9999999;

document.body.appendChild(ttel);

function showTooltip(e) {

console.log(e)

ttel.innerHTML = this.innerText || this.textContent || this.value;

ttel.style.left = (e.pageX + 10) + ‘px’;

ttel.style.top = (e.pageY + 10) + ‘px’;

ttel.style.display = ‘block’;

return false;

}

function hideTooltip(e) {

ttel.style.display = ‘none’;

ttel.innerHTML = ”;

return false;

}

function isTextNode(el) {

var children = el.children;

if (el.childElementCount == 0)

return true;

for (var i = 0; i  children.length; i++) {

el = children[i];

var text = ((typeof el.innerText !== ‘undefined’  el.innerText != ”) ? el.innerText : el.textContent) || el.value;

if (text)

return false;

}

return true;

}

function bindEvent(el) {

var children = el.children;

if (children.length == 0 || isTextNode(el)) {

var text = ((typeof el.innerText !== ‘undefined’  el.innerText != ”) ? el.innerText : el.textContent) || el.value;

if ((typeof text !== ‘undefined’  text != ”)) {

if (el.attachEvent) {

el.attachEvent(‘onmouseover’, showTooltip);

el.attachEvent(‘onmouseout’, hideTooltip);

} else if (el.addEventListener) {

el.addEventListener(‘mouseover’, showTooltip);

el.addEventListener(‘mouseout’, hideTooltip);

}

}

} else {

for (var i = 0; i  children.length; i++) {

if (children[i])

bindEvent(children[i]);

}

}

}

var el = document.body;

bindEvent(el);

})(document);

js鼠标移动至图片上，出现文字鼠标移开文字隐藏代码

直接利用css就能办到鼠标移上去显示 离开隐藏的效果：

style

#aa{position:relative;width:300px; height:200px;}

#aa img{display:block;width:100%;height:100%;}

#aa span{display:none;}

#aa:hover span{position:absolute;left:0;bottom:0;display:block;width:100%;height:30px; line-height:30px;text-align:center; color:#eee;}

/style

JS写法：

script

window.onload = function(){

var box = document.getElementById(‘aa’);

box.onmouseover = function(){

this.getElementsByTagName(‘span’)[0].style.display = ‘block’;

}

box.onmouseout = function(){

this.getElementsByTagName(‘span’)[0].style.display = ‘none’;

}

}

/script

div id=”aa”

img src=”” /

span文字内容/span

/div

js鼠标悬停显示文字的实例介绍？

如meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

1、html

2、head

3、meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /

4、titleJS教程:鼠标悬停时显示文字或显示图片/title

5、script language=”javascript”

6、functionshowPic(sUrl{varx,y;x=event.clientX;y=event.clientY;document.getElementById(“Layer1”).style.left=x;document.getElementById(“Layer1”).style.top=y;document.getElementById(“Layer1”).innerHTML = “img src=\”” + sUrl + “\””;   document.g

7、function hiddenPic(){ document.getElementById(“Layer1”).innerHTML = “”; document.getElementById(“Layer1”).style.display = “none”; }

8、/script

9、/head

10、body

11、div id=”Layer1″ style=”display:none;position:absolute;z-index:1;”/div

12、img src=”#########” onmouseout=”hiddenPic();”

13、onmousemove=”showPic(this.src);” title=”wowowowo” /    //此行title实现悬停时显示文字onmousemove实现显示图片

14、p/p

15、/body

16、/html