๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/javascript, jQuery

โœˆjquery hover function ์‚ฌ์šฉ ์˜ˆ

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2019. 7. 25.

๋ชฉ์ฐจ

    ์ œ์ด์ฟผ๋ฆฌ ์ด๋ฒคํŠธ ์ค‘์—์„œ ๊ฝค ํ”ํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๋Š” ์ด๋ฒคํŠธ ๋ฉ”์†Œ๋“œ๊ฐ€ ๋ฐ”๋กœ hover๋‹ค.

    ํŠน์ • ์—˜๋Ÿฌ๋จผํŠธ ์œ„์— ๋งˆ์šฐ์Šค๊ฐ€ ์œ„์น˜ํ•˜๊ฑฐ๋‚˜ ๋ฒ—์–ด๋‚ฌ์„ ๋•Œ์˜ ์ด๋ฒคํŠธ๋ฅผ ์ •์˜ํ•œ๋‹ค.

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ mouseenter, mouserover๋ฅผ ํ•œ ๋ฒˆ์— ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค.

    CSS์˜ :hover ์„ ํƒ์ž๋ฅผ ์ด์šฉํ•œ ๊ฒƒ๊ณผ ๊ฐ™์€ ์ด๋ฒคํŠธ๋ฅผ ํƒ€๊ธฐ ๋•Œ๋ฌธ์—, ํ‚ค๋ณด๋“œ๋กœ ์•ต์ปค์— ์œ„์น˜ํ–ˆ์„ ๋•Œ๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค.

    jquery hover function ์‚ฌ์šฉ ์˜ˆ

    $(document).ready(function(){
    	
    	//2depth menu showing when menu is collapsed
    	var hoverMenu = $('.lnb .lnb1depth >li');
    	hoverMenu.hover(
    		function () {
    			var menuInitH = $('#menuInit').attr("value");
    			if (menuInitH == 0 ){
    				$('#menuLayer').html($(this).html());
    				$('#menuLayer .lnb2depth').show();
    				$('#menuLayer').show();
    			}
    		},
    		function () {
    			var menuInitH = $('#menuInit').attr("value");
    			if (menuInitH == 0 ){
    			}
    		}
    	);
    });
    

    ๋ฐ˜์‘ํ˜•

    ๋Œ“๊ธ€