简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - onmouseover masalah kelipan Tetikus akan berkelip berterusan apabila menggerakkannya.
phpcn_u1582
phpcn_u1582 2017-06-26 10:53:19
0
2
914

InnerHTML dalam onmouseover tambah dua p akan berkelip, tetapi satu tidak akan:

<!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(){//获得所有li
                var olBox = null;
                var aOli=[];// 存放所有li元素节点
                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时的效果
                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>标题</h4>' +
                                '<p>内容内容内容内容</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>
phpcn_u1582
phpcn_u1582

membalas semua(2)
为情所困
为情所困2017-06-26 10:55:19 Tingkat 2

mouseover akan terus dicetuskan apabila tetikus bergerak, menyebabkan kandungan html dalam li akan ditulis semula, cuma tukar kepada mouseenter dan mouseleave

Anda boleh melihat ini sebagai contoh: https://jsfiddle.net/chenjsh3...

Suka +0
Tambah Balasan
阿神
阿神2017-06-26 10:55:19 Tingkat 1

Cuba tukar kepada onmouseenter和onmouseleave

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！