js怎么做鼠标移过去会显示隐藏的内容

JavaScript015

js怎么做鼠标移过去会显示隐藏的内容,第1张

功能:使用js制作鼠标移过去会显示隐藏的内容

步骤:

1、构造好页面内容;

2、在css中设置一个隐藏类hide,类的样式为display:none;设置显示类show,样式为display:block;

3、给需要隐藏的内容设置类名为hide,这样就隐藏了控件

4、在js标签中,通过控件的类名或者id获取到隐藏对象obhide以及需要监控的对象ob2,再对ob2对象设置onmouseover方法,在这个方法中,将bohide的类名hide更换成show,这样,在鼠标进入ob2控件之中,就会显示隐藏的obhide的内容,

对ob2对象设置onmouseout方法,在这个方法中,将bohide的类名show更换成hide,这样,在鼠标离开ob2控件,就会隐藏obhide的内容,

(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)