마우스 오버할때 배경과 메뉴명이 바뀌는 메뉴를 만들어보자.
<nav>
<ul>
<li><a href="">Description</a></li>
<li><a href="">A. Hover Menu</a></li>
<li><a href="">B. ScrollMove Menu</a></li>
<li><a href="">C. Slide Banner</a></li>
<li><a href="">D. Fade Banner</a></li>
<li><a href="">E. SNS Move List Gellay</a></li>
<li><a href="">F. Wing banner</a></li>
<li><a href="">G. Layout Popup</a></li>
</ul>
</nav>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
// A hover menu
$("nav>ul>li").hover(function(){
$(this).find('a').css({'color':'#0042a4','font-weight':'600'})
},function(){
$(this).find('a').css('color','#000')
});
$("nav>ul>li").hover(function(){
$(this).css('background-color','#fff')
},function(){
$(this).css('background-color','#ccc')
});
});
</script>
'기타 > -자바스크립트&제이쿼리' 카테고리의 다른 글
팝업 뛰우기 (0) | 2017.04.12 |
---|---|
자바스크립트,카드 (0) | 2017.04.05 |
자바스크립트/ 시작 (0) | 2017.04.03 |
제이쿼리-스크롤제어 (0) | 2017.03.27 |
java script 01 (0) | 2017.03.06 |