javascript - onmouseover閃爍問(wèn)題 鼠標(biāo)移動(dòng)上去會(huì)不停的閃爍
問(wèn)題描述
onmouseover里面的innerHTML加兩個(gè)p會(huì)閃爍，一個(gè)不會(huì)：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style>*{ margin: 0; padding: 0;}#box { width: 250px; height: 350px; border: 3px solid darkgrey;}ul li{ float: left; margin: 20px 10px; background-color: goldenrod; list-style: none;}ol { margin-top: 70px;}ol li { height: 40px; border-bottom: 1px solid gainsboro;}ol li p{ display: inline-block; margin:0 15px;} </style> <script>window.onload = function () { var box = document.getElementById(’box’); var aOl = box.getElementsByTagName(’ol’); var arrIMG = [’1.png’,’2.png’,’3.png’,’4.png’,’5.png’,’6.png’]; function lis(){//獲得所有l(wèi)ivar olBox = null;var aOli=[];// 存放所有l(wèi)i元素節(jié)點(diǎn)for (var i=0;i<aOl.length;i++){//遍歷ol olBox = aOl[i].getElementsByTagName(’li’); for(var j=0;j<olBox.length;j++){aOli.push(olBox[j]); }}return aOli } function liHover(li,imgs){// hover時(shí)的效果for(var i=0;i<li.length;i++){ li[i].index = i; li[i].onmouseover = function () {this.innerHTML = ’<p><img src=’+imgs[li.index]+’ alt=''></p>’ +’<p>’ +’<h4>標(biāo)題</h4>’ +’<p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>’ +’</p>’; } li[i].onmouseout = function () {this.innerHTML = this.index+1; }} } var toLi = lis(); liHover(toLi,arrIMG);} </script></head><body><p id='box'> <ul><li><h3>每日</h3></li><li><h3>每周</h3></li><li><h3>每月</h3></li> </ul> <ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li> </ol> <ol style='display: none'><li>111</li><li>222</li><li>3333</li><li>444</li><li>555</li><li>666</li> </ol> <ol style='display:none'><li>1aa</li><li>2aa</li><li>3aa</li><li>4aa</li><li>5aa</li><li>6aa</li> </ol></p></body></html>
問(wèn)題解答
回答1：mouseover 會(huì)在鼠標(biāo)移動(dòng)的時(shí)候不斷觸發(fā)，導(dǎo)致重寫(xiě) li 里的 html 內(nèi)容，改成 mouseenter 和 mouseleave 就可以了
例子可以看這個(gè)：https://jsfiddle.net/chenjsh3...
回答2：試試改成onmouseenter和onmouseleave呢
相關(guān)文章：
1. python - oslo_config2. python - 如何統(tǒng)計(jì)一份英文 API 開(kāi)發(fā)文檔（如 javadoc文檔）的詞頻？3. mysql優(yōu)化 - mysql 一張表如果不能確保字段列長(zhǎng)度一致，是不是就不需要用到char。4. python - 請(qǐng)問(wèn)這兩個(gè)地方是為什么呢？5. python2.7 - python 正則前瞻 后瞻 無(wú)法匹配到正確的內(nèi)容6. 請(qǐng)教一個(gè)mysql去重取最新記錄7. javascript - 按鈕鏈接到另一個(gè)網(wǎng)址 怎么通過(guò)百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量8. 人工智能 - python 機(jī)器學(xué)習(xí) 醫(yī)療數(shù)據(jù) 怎么學(xué)9. 大家都用什么工具管理mysql數(shù)據(jù)庫(kù)？10. php - 有關(guān)sql語(yǔ)句反向LIKE的處理
網(wǎng)公網(wǎng)安備