hover2 [CSS] 마우스오버 (hover) 밑줄 애니메이션 효과 마우스오버(mouseover, hover) 시 밑줄(underline)이 가운데 또는 왼쪽에서부터 나타나는 효과 적용하는 법 [html] Center Left to Right [css] ul { display: flex; gap: 40px; font-size: 40px; list-style: none; } li::after { content: ""; display: block; width: 100%; height: 4px; background: #000; transition: all 1s; } /* 가운데에서 나타남 */ .center::after { transform: scaleX(0); } .center:hover::after { transform: scaleX(1); } /* 왼쪽에서 나타남 */ .. 2023. 8. 22. [jQuery] 마우스 오버(hover) 내려오는 드롭 메뉴 제이쿼리(jQuery)를 이용하여 마우스 오버(hover) 내려오는 slide down 드롭 메뉴 만들기 [html] menu1 drop menu2 drop menu3 drop [css] ul{ display: flex; gap: 10px; } li{ position: relative; width: 100px; list-style: none; background: yellowgreen; } .drop-menu-wrap{ display: none; position: absolute; width: 100%; height: 60px; background: skyblue; } [js] $(document).ready(function(){ $('nav > ul > li').mouseover(function(){ .. 2023. 6. 6. 이전 1 다음 728x90
