前提・実現したいこと
写真の外側から内側へマウスオーバーしたら囲いのような影がでるアニメーションを作りたいのですが、うまくいきません。どなたかアドバイスいただけると嬉しです。よろしくお願いいたします。
発生している問題・エラーメッセージ
外側から半透明の四角をマウスオーバーで外から内に寄せると、重なった部分の色が濃くなってしまう。
ボーダーを外側から、マウスオーバーで内側に寄せる命令をするとtransitionをいれてもゆっくりうごかない。
該当のソースコード
html
1<div id="img_box5"><img class="img-n5" src="img/1x/page1.jpg"> 2<div id="mask5_1"></div><div id="mask5_2"></div><div id="mask5_3"></div><div id="mask5_4"></div> 3</div>
css
1#img_box5 { 2 width: 17em; 3 height: 14em; 4 float: left; 5 margin: 0px; 6 overflow: hidden; 7 position:relative ; 8} 9.img-n5 { 10 width: 17em; 11 height: 14em; 12} 13#mask5_1{ 14 position: absolute; 15 top:0; 16 width: 17em; 17 height: 14em; 18 border: solid 2em rgba(99, 59, 22, 0.466); 19 transition:0.8s; 20} 21#mask5_2{ 22 left:17em; 23 top:0; 24 position: absolute; 25 background-color: rgba(99, 59, 22, 0.466); 26 width: 4em; 27 height: 14em; 28 transition:0.8s; 29} 30#mask5_3{ 31 left:0; 32 top:-4em; 33 position: absolute; 34 background-color: rgba(99, 59, 22, 0.466); 35 width: 17em; 36 height: 4em; 37 transition:0.8s; 38} 39#mask5_4{ 40 left:0; 41 top:14em; 42 position: absolute; 43 background-color: rgba(99, 59, 22, 0.466); 44 width: 17em; 45 height: 4em; 46 transition:0.8s; 47} 48#mask5_1.active{ box-sizing:border-box; 49} 50#mask5_2.active{left:13em;} 51#mask5_3.active{top:0;} 52#mask5_4.active{top:10em;} 53
js
1var target2 = document.getElementById('img_box5'); 2var mask5_1 = document.getElementById('mask5_1'); 3var mask5_2 = document.getElementById('mask5_2'); 4var mask5_3 = document.getElementById('mask5_3'); 5var mask5_4 = document.getElementById('mask5_4'); 6 7target2.addEventListener('mouseenter',function(){ 8 if(mask5_1.className ==null || mask5_1.className ==""){ 9 mask5_1.className = "active"; 10 mask5_2.className = "active"; 11 mask5_3.className = "active"; 12 mask5_4.className = "active"; 13 } 14},false); 15target2.addEventListener('mouseleave',function(){ 16 if(mask5_1.className = "active"){ 17 mask5_1.className = ""; 18 mask5_2.className = ""; 19 mask5_3.className = ""; 20 mask5_4.className = ""; 21 } 22},false);
試したこと
周りに四角を配置して、内側に寄せてみる。
box-sizing:border-box;で内側に寄せてみる。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/15 14:26