>>>oq2b
<!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>