###1.サンプル
以前に書いた記事「俺queryという方法論」（←俺クエリーとは何なのかを紹介）で例示したサンプルがあまりにも煩雑でとっつきづらい物だったので、今更ながら最初歩のOrequeryコードを。
<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset=UTF-8>
<style>
/*rule*/*{margin:0;padding:0;box-sizing:border-box;}ul{list-style:none;position:fixed;}ul,li{border-radius:30px;}
/*ul*/ul{top:calc(50% - 30px);left:calc(50% - 80px);width:160px;height:60px;padding:10px 20px;background:#444;}
/*li*/li{width:40px;height:40px;opacity:.4;float:left;cursor:pointer;}
li.c1{background:#7cc;}li.c2{background:#cc7;}li.c3{background:#c77;}
/*orequery*/li{transition:1s;}.c1>.c1,.c2>.c2,.c3>.c3{opacity:1;box-shadow:0 0 4px 4px rgba(255,255,200,.4);}
</style>
<meta name=viewport content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<body>
<ul id=i1 class=c1><li class=c1 onmouseover=isc(1,1)><li class=c2 onmouseover=isc(1,2)><li class=c3 onmouseover=isc(1,3)></ul>
<script>
function isc(i,c){document.getElementById('i'+i).className='c'+c}
</script>
</body>
###2.解説
####2-1.前提
<ul>のなかに<li>を三つ書き、styleで青、黄、赤に色分け。↓
li.c1{background:#7cc;}li.c2{background:#cc7;}li.c3{background:#c77;}
opacityを0.4にしているので暗め。↓
li{width:40px;height:40px;opacity:.4;float:left;cursor:pointer;}
####2-2.ミソ
OreQuery(自前JQuery)で、ホバーした <li> の opacity を 1 に変えている。
具体的には、jsのisc関数で <ul>（親要素）のクラスを変える。
li.c1（青）をホバーすれば ul.c1 となるので、.c1>.c1 となり、青が光って見える。
function isc(i,c){document.getElementById('i'+i).className='c'+c}
li{transition:1s;}.c1>.c1,.c2>.c2,.c3>.c3{opacity:1;box-shadow:0 0 4px 4px rgba(255,255,200,.4);}
####2-3.ようするに何が言いたいのか
DHTMLの実装において各要素のstyleを変えたければ、
①classを当てたい要素に「id=i数値」を書く
②表現したい結果としてstyleに「.c数値」を書く
③jsのたった一行の関数isc(ID数値,Class数値)を発火する。
という非常にシンプルなプロセスで十分に機能する。
∗{transition:1s} を入れれば数値化された属性値はスマートに変化するし、js知識があればisc(i,c)の発火する条件も自在に操れるので、JQueryなどは一切必要ない。
###3.ちょっと応用
####3-1.ホバーではなくクリックにするなら
onmouseover=isc を onclick=isc に書き換え、ついでに /∗1∗/ の中身を追加。↓
.c1>.c1,.c2>.c2,.c3>.c3{/*1*/cursor:auto;/*1*/opacity:1;
もしくは <li onclick=isc(∗,∗)> の代わりに <a href=javascript:isc(∗,∗)></a> とし、<sutyle>内も li を全て a に変え、↓を追加。
a{display:block;text-decoration:none;}
####3-2.信号機を三つ作るなら
<ul id=i1 class=c1><li class=c1 onmouseover=isc(1,1)><li class=c2 onmouseover=isc(1,2)><li class=c3 onmouseover=isc(1,3)></ul>
↑の下に↓を追加し、
<ul id=i2 class=c1><li class=c1 onmouseover=isc(2,1)><li class=c2 onmouseover=isc(2,2)><li class=c3 onmouseover=isc(2,3)></ul>
<ul id=i3 class=c1><li class=c1 onmouseover=isc(3,1)><li class=c2 onmouseover=isc(3,2)><li class=c3 onmouseover=isc(3,3)></ul>
styleに↓を追加。
#i1{top:calc(50% - 100px);}#i3{top:calc(50% + 40px);}
####3-3.親要素でなく、兄要素も使える
<ul id=i1 class=c1> を <ul><i id=i1 class=c1></i> に変え、
.c1>.c1,.c2>.c2,.c3>.c3
↑を↓に変える。
.c1~.c1,.c2~.c2,.c3~.c3
####3-4.兄要素を二つ作り、属性を分けて操作
<style>
.c1~.c1,.c2~.c2,.c3~.c3{opacity:1;}
.c4~.c1,.c5~.c2,.c6~.c3{box-shadow:0 0 4px 4px rgba(255,255,200,.4);}
</style>
<ul><i id=i1 class=c1></i><i id=i2 class=c4></i><li class=c1 onmouseover=isc(1,1);isc(2,4)><li class=c2 onmouseover=isc(1,2);isc(2,5)><li class=c3 onmouseover=isc(1,3);isc(2,6)></ul>
もしも isc(2,6) を isc(2,0) に変えるか、またはstyleの ,.c6~.c3 を削除すれば、赤信号は滲まなくなる。
###4.全ての応用を適用したサンプル
信号機を三つ作り、li onmouseover= を a href=javascript: に変え、３家族全てに兄要素２つを作り、
上は青だけ、真ん中は黄色だけ、下は赤だけ滲まないようにしたサンプルは以下。
<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset=UTF-8>
<style>
/*rule*/*{margin:0;padding:0;box-sizing:border-box;}ul{list-style:none;position:fixed;}ul,a{border-radius:30px;}
/*ul*/ul{top:calc(50% - 30px);left:calc(50% - 80px);width:160px;height:60px;padding:10px 20px;background:#444;}
/*追加→*/ul:nth-of-type(1){top:calc(50% - 100px);}ul:nth-of-type(3){top:calc(50% + 40px);}
/*li->a*/a{width:40px;height:40px;opacity:.4;float:left;/*cursor:pointer;←不要*//*追加→*/display:block;text-decoration:none;}
a.c1{background:#7cc;}a.c2{background:#cc7;}a.c3{background:#c77;}
/*orequery(属性を分割)*/a{transition:1s;}.c1~.c1,.c2~.c2,.c3~.c3{opacity:1;cursor:auto;}.c4~.c1,.c5~.c2,.c6~.c3{box-shadow:0 0 4px 4px rgba(255,255,200,.4);}
</style>
<meta name=viewport content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<body>
<!--親要素ではなく兄二人-->
<ul><i id=i1 class=c1></i><i id=i2 class=c4></i>
<!--(li -> a) / (onmouseover -> href:javascript)-->
<a class=c1 href=javascript:isc(1,1);isc(2,0)></a><!--青だけ滲まない-->
<a class=c2 href=javascript:isc(1,2);isc(2,5)></a>
<a class=c3 href=javascript:isc(1,3);isc(2,6)></a>
</ul>
<!--追加-->
<ul><i id=i3 class=c1></i><i id=i4 class=c4></i>
<a class=c1 href=javascript:isc(3,1);isc(4,4)></a>
<a class=c2 href=javascript:isc(3,2);isc(4,0)></a><!--黄色だけ滲まない-->
<a class=c3 href=javascript:isc(3,3);isc(4,6)></a>
</ul>
<ul><i id=i5 class=c1></i><i id=i6 class=c4></i>
<a class=c1 href=javascript:isc(5,1);isc(6,4)></a>
<a class=c2 href=javascript:isc(5,2);isc(6,5)></a>
<a class=c3 href=javascript:isc(5,3);isc(6,0)></a><!--赤だけ滲まない-->
</ul>
<script>
function isc(i,c){document.getElementById('i'+i).className='c'+c}
</script>
</body>