-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
가상클래스 여백생김 문제
23.01.20 09:48 작성 조회수 271
1
■ 질문 남기실 때 꼭! 참고해주세요.
안녕하세요!
가상클래스로 텍스트 컬러 채워지는 부분에서
컬러 텍스트 주위에 원래 텍스트 흰색이 테두리처럼
보이는데, 해결할 방법이 없을까요? 크기를 변경해도 같습니다 ㅠ
혹시나해서 다른 폰트로 바꿔봤는데
같은 css인 top:0, left:0 이어도 아래처럼 간격이 보이더라구요ㅠ 자세히 보면 가상클래스로 만든 텍스트가 크기 자체가 살짝 작은데요, 그래서 테두리가 보이는 것 같습니다. 가상클래스의 특성일까요?
답변을 작성해보세요.
0
sun
질문자2023.01.25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>마우스 올리면 배경이미지 변경하기</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="style-background.css" />
</head>
<body>
<div class="container">
<ul class="navi">
<li data-img="./images/portrait-01.jpg">
<a href="#none" data-txt="ABOUT">ABOUT</a>
</li>
<li data-img="./images/portrait-02.jpg">
<a href="#none" data-txt="INSTRUCTOR">INSTRUCTOR</a>
</li>
<li data-img="./images/portrait-03.jpg">
<a href="#none" data-txt="CLASS">CLASS</a>
</li>
<li data-img="./images/portrait-04.jpg">
<a href="#none" data-txt="LOCATION">LOCATION</a>
</li>
</ul>
<div class="photo"></div>
</div>
<script>
$(".navi li").mouseenter(function () {
var dataImg = $(this).attr("data-img");
$(".photo").css({ "background-image": "url(" + dataImg + ")" });
});
$(".navi li").mouseleave(function () {
$(".photo").css({ "background-image": ''});
});
</script>
</body>
</html>
안녕하세요~
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;
}
코딩웍스(Coding Works)
지식공유자2023.01.25
올려주신 코드로 확인해봤는데 저는 정상적으로 나오는데요.
링크하신 웹폰트 다른 것들로 해도 괜찮더라구요.
이런 경우 혹시 폰트 종류에 따른 줄 간격 때문일 수 있어요.
그래서 .navi li a 여기에 line-height: 0 줘보세요.
0
답변 2