0
호버링이 하위 요소에서 작동하지 않는 이유와 상대적 위치를 "절대"로 변경하는 이유에 대해 상대적으로 초보자 용 질문입니다. .자식 div에 적용하면 호버 작동이 멈 춥니 다. 위치가 절대로 설정된 경우 사라집니다.
내 프로젝트는 기본 프로젝트이며 머리글, 바닥 글 및 컨테이너가 있습니다. 컨테이너에는 이미지가있는 "imagewrap"이라는 하위 div가 있습니다. 이미지를 변경할 수있는 버튼을 추가하고 싶습니다. 그리고 난 당신이 이미지 위에 마우스를 가져 가면이 지프에서 볼 수 있듯이 나는 용기 위에 마우스를 올려 때
이 버튼이 나타 납니까, 표시하는 버튼을 원하지만, 그들은 이미지 아래 않습니다. 절대 위치로 변경하면
.buttons {
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity .3s ease-in-out;
position: absolute;
}
사라집니다. 나는 또한 이유를 모른다.
CSS
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: white;
}
#imagewrap {
position: relative;
border: 1px solid lightgrey;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#controllers {
position: absolute;
height: 20px;
}
#container #imagewrap:hover .buttons {
opacity: 1;
}
.buttons {
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity .3s ease-in-out;
position: relative;
}
#previous {
left: 0px;
background-image: url(Images/carremoins.png);
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 20px;
z-index: 4;
}
#next {
background-image: url(Images/carreplus.png);
background-repeat: no-repeat;
width: 20px;
height: 20px;
right: 0px;
z-index: 4;
background-position: center center;
}
HTML 시간에 대한
<body>
<div id="header">
</div>
<div id="container">
<div id="imagewrap">
<img src="Images/01PARANA/Image.jpg" height="500px" id="front" />
<div id="previous" class="buttons" onclick="change(-1);">
</div>
<div id="next" class="buttons" onclick="change(1);">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
감사 : 여기
은 HTML과 CSS 코드입니다.