Javascript & JQuery & CSS > mouseenter(), mouseleave(), mousedown(), mouseup()
µî·ÏÀÏ : 2017-07-13 10:15
Á¶È¸¼ö : 68,164
À̹øÀå¿¡¼´Â jQuery À̺¥Æ®Áß mouseenter(), mouseleave(), mousedown(), mouseup() ¸¶¿ì½º¿Í °ü·ÃµÈ À̺¥Æ®¿¡ ´ëÇؼ ¾Ë¾Æº¸°Ú½À´Ï´Ù.
1. mouseenter()
¸¶¿ì½º ´Ù°¡¿ÔÀ»¶§ ¹ß»ýÇÏ´Â À̺¥Æ®ÀÔ´Ï´Ù.
2. mouseleave?()
¸¶¿ì½º°¡ ÀÚ¸®¸¦ ¶°³µÀ»¶§ À̺¥Æ®¸¦ ÁÙ¼ö ÀÖ´Â ÇÔ¼ö ÀÔ´Ï´Ù.
3. mousedown?()
¸¶¿ì½º ¿ÞÂÊ ¹öÆ° Ŭ¸¯°ú µ¿½Ã¿¡ À̺¥Æ®¸¦ ÁÙ¼ö ÀÖ´Â ÇÔ¼öÀÔ´Ï´Ù.
3. mouseup?()
¸¶¿ì½º ¿ÞÂʹöÆ°À» Ŭ¸¯ÇÏ°í ³õÀ»¶§ À̺¥Æ®¸¦ ÁÙ¼ö ÀÖ´Â ÇÔ¼öÀÔ´Ï´Ù.
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
?$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
¾Æ·¡¿Í °°Àº Çü½Ä on() ¸Þ¼µå¸¦ ÀÌ¿ëÇÏ¿© ó¸®ÇÒ ¼öµµ ÀÖ´Ù.
<script>
$(document).ready(function(){
$("p").on({
mouseenter: function() {
$(this).css("background-color","lightgray");
},
mouseleave: function() {
$(this).css("background-color","lightblue");
},
click: function() {
$(this).css("background-color","yellow");
}
});
});
</script>