>>>oq2
<!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;} /*外部要素*/html,body,textarea{width:100%;height:100%;}textarea{max-width:600px;height:calc(100% - 50px);margin:auto;}a{width:calc(50% - 300px);min-width:150px;} /*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*/ul 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>