###[√] cssのhoverが有効になる場合とならない場合がある
###[√] code
html
1 2<!DOCTYPE html> 3 4<html> 5 6 <head> 7 <style> 8 *{ 9 box-sizing:border-box; 10 margin:0; 11 padding:0; 12 } 13 body{ 14 margin:10px; 15 } 16 17 .wrap{ 18 box-sizing:content-box; 19 position:relative; 20 width:600px; 21 height:500px; 22 border:1px solid #ddd; 23 margin:100px auto; 24 } 25 .wrap> *{ 26 list-style:none; 27 position:absolute; 28 display:inline-block; 29 border:1px solid #555; 30 } 31 32 .thumb{ 33 width:100px; 34 height:100px; 35 left:0; 36 } 37 .thumb:nth-of-type(1){ 38 top:0; 39 background:azure; 40 } 41 .thumb:nth-of-type(2){ 42 top:100px; 43 background:lightYellow; 44 } 45 .thumb:nth-of-type(3){ 46 top:200px; 47 background:pink; 48 } 49 50 .img{ 51 top:0; 52 right:0; 53 width:500px; 54 height:500px; 55 transition:0.1s; 56 opacity:0; 57 } 58 .img:nth-last-child(4){ 59 background:#eee; 60 opacity:1; 61 } 62 .img:nth-last-child(3){background:azure;} 63 .img:nth-last-child(2){background:lightYellow;} 64 .img:nth-last-child(1){background:pink;} 65 66 #thumb01input, 67 #thumb02input, 68 #thumb03input, 69 #thumb001input, 70 #thumb002input, 71 #thumb003input{display:none;} 72 73 </style> 74 </head> 75 76 <body> 77 78 <h1>demo</h1> 79 80 <hr> 81 82 <h2>css,hover</h2> 83 84 <style> 85 #thumb1:hover ~ #img1, 86 #thumb2:hover ~ #img2, 87 #thumb3:hover ~ #img3{opacity:1;z-index:100;} 88 </style> 89 90 <ul class="wrap"> 91 <li id="thumb1" class="thumb"></li> 92 <li id="thumb2" class="thumb"></li> 93 <li id="thumb3" class="thumb"></li> 94 <li id="img0" class="img"></li> 95 <li id="img1" class="img"></li> 96 <li id="img2" class="img"></li> 97 <li id="img3" class="img"></li> 98 </ul> 99 100 <hr> 101 102 <h2>input,checked</h2> 103 104 <style> 105 #thumb01input:checked ~ #img01, 106 #thumb02input:checked ~ #img02, 107 #thumb03input:checked ~ #img03{opacity:1;z-index:100;} 108 </style> 109 110 <div class="wrap"> 111 <input id="thumb01input" type="radio" name="myradio1"></input> 112 <label for="thumb01input" id="thumb01" class="thumb"></label> 113 <input id="thumb02input" type="radio" name="myradio1"></input> 114 <label for="thumb02input" id="thumb02" class="thumb"></label> 115 <input id="thumb03input" type="radio" name="myradio1"></input> 116 <label for="thumb03input" id="thumb03" class="thumb"></label> 117 <div id="img00" class="img"></div> 118 <div id="img01" class="img"></div> 119 <div id="img02" class="img"></div> 120 <div id="img03" class="img"></div> 121 </div> 122 123 <hr> 124 125 <h2>both</h2> 126 127 <style> 128 #thumb001input:checked ~ #img001, 129 #thumb002input:checked ~ #img002, 130 #thumb003input:checked ~ #img003{opacity:1;z-index:100;} 131 #thumb001input:hover ~ #img001, 132 #thumb002input:hover ~ #img002, 133 #thumb003input:hover ~ #img003{opacity:1;z-index:200;} 134 </style> 135 136 <div class="wrap"> 137 <input id="thumb001input" type="radio" name="myradio2"></input> 138 <label for="thumb001input" id="thumb001" class="thumb"></label> 139 <input id="thumb002input" type="radio" name="myradio2"></input> 140 <label for="thumb002input" id="thumb002" class="thumb"></label> 141 <input id="thumb003input" type="radio" name="myradio2"></input> 142 <label for="thumb003input" id="thumb003" class="thumb"></label> 143 <div id="img000" class="img"></div> 144 <div id="img001" class="img"></div> 145 <div id="img002" class="img"></div> 146 <div id="img003" class="img"></div> 147 </div> 148 149 </body> 150 151</html>
期待される動作:
サムネイルがhover/checkされたら、別窓に拡大表示する
###[√] 問題
bothのサムネイルにhoverした際のcssがすぐに効かない。
サムネイル群の中でカーソルをうろちょろさせてからでないと、:hoverが作動しない。
回答2件
あなたの回答
tips
プレビュー