今、マウスオーバーされたら画像が半透明になり、マウスアウトされたら画像が不透明になる。
というプログラムを書いています。
そこでプログラムに問題がありうまく動作しない、ということではないのですが、
一つ疑問に思ったことがあるので質問させていただきます。
html
1<ul class="shortcut clear"> 2 <li class="first"> 3 <a href="#" class="btn-action"> 4 <img src="images/shortcut1.png"> 5 <p>SAVE</p> 6 </a> 7 </li> 8 <li class="second"> 9 <a href="#" class="btn-action"> 10 <img src="images/shortcut2.png"> 11 <p>FORECAST</p> 12 </a> 13 </li> 14 <li class="third"> 15 <a href="#" class="btn-action"> 16 <img src="images/shortcut3.png"> 17 <p>CREATE</p> 18 </a> 19 </li> 20 </ul>
javascript
1$(function(){ 2 var value = 0.5; 3 4 $('.third') 5 .on('mouseenter mouseleave', '.btn-action', function(event){ 6 event.preventDefault(); 7 var opacityValue; 8 if(event.type === 'mouseenter'){ 9 opacityValue = value; 10 }else{ 11 opacityValue = 1; 12 } 13 14 $(this).find('img') 15 .animate({opacity:opacityValue}, 500); 16 }); 17});
このJavascriptの中にある、、、
javascript
1event.preventDefault();
1、このプログラムがどこのデフォルト動作をキャンセルしているか分かりません。
2、また、どんなデフォルト動作なのでしょうか?
この2点を教えていただけると嬉しいです。
(ちなみに、、a要素のページの遷移だと思ったのですが、試してみたら違いました。)
(「mouseenter」と「mouseleave」のデフォルト動作だと思って調べてみたんですが、特になかったので質問させていただきました。)
ご回答、宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー