對所有選中元素設置 onmouseover

讓所選用中的所有元素，都具有特定 onmouseover / onmouseout 的效果。

這裡的困難是，並不是單獨在每一個 HTML元素裡面設定 onmouseover 互動功能，而是「寫一段程式」來讓所有被選中的元素都具有互動功能。

在範例中，所有具有 class="demo" 的元素，都被賦與了特定的 mouseover 的互動作用。


範例：

請 mouseover ↓↓

Mouse over me

4

Hi, 5 is good.

6

this is p!

語法：

<style>
.demo {
margin-bottom: 1em;
cursor: pointer;
}
</style>

<h1 class="demo">Mouse over me</h1>
<div class="demo">4</div>
<div class="demo">Hi, 5 is good.</div>
<div class="demo">6</div>
<p class="demo">this is p!</p>

<script>

var elms = document.getElementsByClassName("demo");
var n = elms.length;

for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        this.style.cssText = "color: red; padding-left: 3em; border-left: 3px solid gray;";
    };
    elms[i].onmouseout = function() {
       this.style.cssText = "color: black; padding-left: 0em; border-left: 0px solid gray;";;
    };
}

</script>


對比單獨HTML元素的設置

在範例中，mouseover 的功能是直接設置在HTML元素裡面。這其實對「文本寫作者」而言是更「切適」的方法。

因為，可以很精準的控制想要去設置的元素，同時，在設置的過程，也是較為直覺的一種「數位文本寫作」方法。


語法：

<h1 class="demo" onmouseover="this.style.cssText = 'color: red; padding-left: 3em; border-left: 3px solid gray;'" onmouseout=" this.style.cssText = 'color: black; '">Mouse over me in HTML</h1>


效果：

Mouse over me in HTML