>source

따라서 이미지 위에 마우스를 올리면 이미지 위에 버튼이 표시되지만 클릭할 수는 없습니다. 링크 또는 이미지를 보유하고 있는 div 내부의 모든 항목에도 동일하게 적용됩니다. 이걸 어떻게 극복할 수 있을까 싶었다.

내 HTML

<div class="content_img">          <img [src]="mydata.image.original" >          <div >            <button type="button"class="btn btn-primary"> Description </button></div></div>

내 CSS

/* Parent Container */
.content_img{
  position: relative;
  width: 90%;
 }
 /* Child Text Container */
 .content_img div{
  position: absolute;
  bottom: 0;
  right: 0;
 background:black;
  color: white;
  margin-bottom: 5px;
  font-family: sans-serif;
  opacity: 0.7;
  visibility: hidden;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
 }
 /* Hover on Parent Container */
 .content_img:hover{
  cursor: pointer;
 }
 .content_img:hover div{
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 0.75;
 }

누군가 저 좀 도와주세요

  • 이전 javascript : Cloud Functions 문서 사본
  • 다음 docker : URL에서 Tomcat 기본 애플리케이션으로 JasperReports