소개
게시글
질문&답변
live sass complier 버전 문제
안녕하세요!익스텐션 삭제하고 재설치했더니 사용자 > 확장에live cass compiler가 생겨서 세팅 잘 했습니다~ 감사합니다.
- 1
- 2
- 514
질문&답변
가상클래스 여백생김 문제
마우스 올리면 배경이미지 변경하기 ABOUT INSTRUCTOR CLASS LOCATION $(".navi li").mouseenter(function () { var dataImg = $(this).attr("data-img"); $(".photo").css({ "background-image": "url(" + dataImg + ")" }); }); $(".navi li").mouseleave(function () { $(".photo").css({ "background-image": ''}); }); 안녕하세요~html과 css 파일 코드 올립니다.감사합니다~ @charset 'utf-8'; /* Fontawesome 4.7 */ @import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); @import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap"); body { margin: 0; font-family: 'Raleway', sans-serif; /* background-color: #000; */ } ul{list-style: none; padding: 0; margin: 0;} .navi{} .navi { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; } .navi li{} .navi li a{ font-size: 4em; /* font-weight: bold; */ text-decoration: none; color: #fff; position: relative; } .navi li a::after{ content: attr(data-txt); position: absolute; color: blueviolet; top: 0; left: 0; width: 0; overflow: hidden; transition: 0.5s; z-index: 10; } .navi li a:hover:after{ width: 100%; } .photo{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url(./images/portrait-initial.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; transition: 0.5s; }
- 1
- 2
- 390