홈>
각 이미지의 맨 아래에 텍스트 오버레이가있는 정렬되지 않은 이미지 목록이 있습니다. 텍스트 오버레이는 배경색이 다른 인라인 블록입니다.
먼저 필요없는 배경색 사이에 공백이 생깁니다. ✔️
둘째, 왼쪽 인라인 블록의 너비는 고정되어 있고 오른쪽은 나머지 너비를 가려야합니다. ✔️
둘째로, 두 번째 블록에는 숨겨져 가리키면 표시되어야하는 다른 요소가 있어야합니다
마지막으로 두 블록의 높이가 변경 될 때 두 블록의 높이가 항상 같기를 원합니다
수정 단락 div가 호버에 표시되어야합니다. 또한 인라인 블록의 높이가 변경 될 때마다 높이가 나오기를 원합니다.
지금까지 내가 가지고있는 것
.slideList {
width: 100%;
}
.slideList li {
position:relative;
}
.slideList .service-highlight {
position: absolute;
color: white;
bottom: 0;
left: 0;
right:0
}
.slideList .service-highlight p {
display: inline-block;
color: white;
font-size: 18px;
font-weight: bold;
}
.slideList .service-highlight .services-box{
text-align: center;
background-color: #003768;
width: 200px;
font-weight: bold;
float: left;
}
.slideList .service-highlight .services-detail{
background-color: #0088ff;
width:calc(100% - 200px);
float: left;
padding-left: 5px;
}
.slideList .hide-description {
display: none;
font-weight:normal;
}
.slideList .hide-description p {
font-weight:normal;
padding-top: 10px 5px 10px;
}
.services-detail:hover + .hide-description {
display: block;
position: absolute;
}
.clearFloat {
clear: both;
}
<ul class="slideList">
<li data-transition="fade">
<img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" >
<div class="service-highlight">
<p class="services-box">SOME SERVICE:</p>
<div class="services-detail">
<p>Some headline</p>
<div class="hide-description">
<p>Some text that appears here. Text describes some service I intend to achieve. This may or may not take up to three lines maybe two </p>
</div>
</div>
</div>
</li>
<ul>
-
답변 # 1
관련 자료
- javascript - 첫 번째 요소를 나머지 요소와 비교하고 두 번째 요소를 나머지 요소 및 동일한 반복과 어떻게 비교할 수 있습니까?
- css - 자식 요소에` - not (: last-child)`를 사용하면 실제 마지막 요소를 건너 뛰지 않습니다
- python - 목록의 튜플에있는 요소에서 문자열을 만드는 방법
- webdriver - 요소가 카피 바라의 두 번째 요소 앞에 오는지 알 수 있습니까?
- javascript - 모든 요소를 대상 요소로 스크롤하려면 어떻게합니까
- python - 목록의 요소를 사용하여 클래스에 대한 개체를 만드는 방법
- python - 한 목록의 각 요소가 다른 목록의 모든 요소의 배수인지 확인
- javascript - attachShadow없이 사용자 지정 요소를 만드는 방법은 무엇입니까?
- Selenium/Java 홈페이지에서 링크를 따라 가면 페이지 요소에 대한 이러한 요소 예외 없음
- javascript - 두 요소를 배열의 문자열 유형 요소에 결합
- html - 3 가지 헤드 요소로 CSS GRID를 만드는 방법
- JavaScript에서 "ball"을 포함하는 항목 요소 내의 요소 만 포함하는 배열을 만드는 방법은 무엇입니까?
- Cypress - 사이프러스 - 두 요소 중 두 번째가 나타날 때까지 기다리는 방법?
- python - 행과 열을 입력으로 사용하고 요소가 행과 열 번호의 곱인 2D 목록을 만들고 싶습니다
- python - 배열 요소의 조합이있는 목록 사전에서 목록을 만드는 방법
- java - 배열의 모든 요소가 같으면 하나의 요소를 인쇄하고 모든 요소가 같지 않으면 가장 큰 요소를 인쇄합니다
- python - 두 2D 배열을 비교하여 두 번째 요소가 일치하는지 확인하려면 어떻게합니까?
- java - 이전 세트 두 개에 공통 요소가 하나 이상 있으면 새 세트를 만드시겠습니까?
- sql - 두 날짜 사이의 매초 날짜 테이블 만들기
- python - Pandas Series 내부 요소를 기반으로 마스크 만들기
관련 질문
- html - 부트 스트랩 4에서 반응 형 문제를 해결하는 방법
- html - 벽돌 레이아웃 그림자가 잘립니다
- html - 본문 태그의 배경 이미지가 표시되지 않습니까?
- javascript - 난수로 버튼을 클릭하면 div의 너비를 줄입니다
- html - navbar React에 이미지 로고와 브랜드 이름을 멋지게 배치
- html - 요소가 주변 요소의 위치를 변경하지 못하도록 방지
- html - CSS를 사용하여 카드 크기를 조정하는 방법
- html - 제목 텍스트/본문 텍스트로 div 상자를 만드는 방법
- javascript - 가로 스크롤 가능 컨테이너를 만드는 방법에 여러 행이 포함되어 있습니다
- html - 부트 스트랩 - colapse 아코디언이 작동하지 않음
1&2) 공백은
.services-box
를 떠 다니면 간단히 제거 할 수 있습니다. &.service-highlight
왼쪽에 고정 너비를.service-box
로 설정하십시오..service-highlight
에 백분율 너비를 제공하십시오 .3) 이것을 달성하려면
:hover
를 사용해야합니다 . 그러나 마우스를 가져 가면 숨겨진 상자가 나타나고 마우스가 마우스 위에 있으므로 마우스가 새 상자에 있으므로:hover
를 잃기 때문에 동일한 줄에 넣을 수 없습니다. 효과가 원래 상태로 돌아가므로 깜박입니다. 이 문제를 피하려면 새 표시 상자를 위에 두십시오.도움이 되었기를 바랍니다!
업데이트 2 :
연결 한 참조에서 텍스트가 아닌 상자 위에 마우스를 놓았습니다. 마크 업 방식을 변경했습니다. 지금 살펴보세요 :