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