아래로 스크롤 화살표를 만들고 있는데 두 개의 회전 된 div를 사용하여 갈매기 모양을 만듭니다. 어떤 이유로 든 포함 div 위에 마우스를 올리면 쉐브론 모양 아래에 작은 파란색 밑줄이 나타납니다.
텍스트 장식을 시도했습니다 : 해당 요소와 부모에게는 해당되지 않습니다. 나는 그것이 효과가 있다고 기대하지 않았습니다. 내가 가지고있는 코드에서 무엇이 원인인지 잘 모르겠습니다. 누구든지 아이디어가 있습니까?
내가 설명하고있는 그림이 있습니다. 화살표 끝 아래에 작은 파란색 밑줄이 있습니다
<프리 클래스 = "조각 코드 - CSS 랭 CSS를 prettyprint 오버라이드 (override)">
#arrow-div {
position: absolute;
background-color: yellow;
text-decoration: none;
bottom: 10px;
right: 0;
left: 0;
}
#arrow-button {
width: 80px;
height: 80px;
margin: auto;
transition: .3s;
text-decoration: none;
}
#arrow-button:hover {
transition: .5s;
border: 4px dotted black;
border-radius: 60px;
text-decoration: none;
}
.arrow {
height: 30px;
width: 8px;
background-color: black;
border-radius: 2px;
display: inline-block;
margin-top: 25px;
text-decoration: none;
}
#arrow-left {
transform: rotate(-45deg);
margin-right: 2px;
}
#arrow-right {
transform: rotate(45deg);
margin-left: 2px;
}
<div class="container" id="arrow-div">
<a href="#slant-1">
<div class="container" id="arrow-button">
<div class="arrow" id="arrow-left"></div>
<div class="arrow" id="arrow-right"></div>
</div>
</a>
</div>
- 답변 # 1
- 답변 # 2
가
a
에옵니다 와이즈 비즈 ,이 CSS 추가tag
https://jsfiddle.net/L93srbdf/
#arrow-div a{ text-decoration:none; }
- html : 스크롤 가능한 div의 텍스트가 절대 div 위에 표시됩니다.
- javascript : JQuery로 클릭시 버튼의 배경색 변경이 작동하지 않습니다.
- javascript : React의 기능 전환
- html : 창 크기가 작을 때 사이드 바 콘텐츠를 메인 콘텐츠보다 전체 너비로 맞추는 방법
- javascript : html /css에서 스크롤 막대 숨기기
- html
- html : Google Chrome에서 PDF로 인쇄 및 저장할 때 반복되는 선형 그라디언트가 나타나지 않습니다.
- javascript : 현재 페이지에있는 동안 마지막 키 프레임의 navbar 요소에서 애니메이션을 유지하려면 어떻게해야합니까?
- html : CSS 여백 속성은 Safari에서 작동하지 않지만 다른 브라우저에서는 작동합니다.
- html : 드롭 다운 Navbar-반응 형
<a>
에서 온 그리고<a>
기본 CSS 적용 텍스트 장식 : 밑줄;아래에 코드를 추가하십시오.