[css] safari 에서 :hover가 작동하지 않습니다.

조회수 782회

안녕하세요. 텍스트에 마우스를 hover 했을때 숨겨졌었던 이미지가 검은색 배경과 함께 뜨는 코드입니다. 여러 이미지가 있어서 제이쿼리를 통해서 일괄적으로 class를 기입한 상태입니다. 크롬에서는 잘 작동하나, safari에서 되지 않는 문제가 있습니다. 그래서 유사한 질문을 구글에 서치하고 stackoverflow 의 방법 onclick=""을 태그에 추가한 상태입니다.

하지만, 그럼에도 불구하고 이슈가 해결되지 않아 해결방법을 여쭙습니다. 긴글 읽어주셔서 감사합니다.

codepen: https://codepen.io/zuae/pen/eYvyeVw

html

<a><img src="https://blog.kakaocdn.net/dn/VtfHP/btqUGUelBG7/cfrigURxQFxfUijWDBExU0/img.gif">PRESS</a>

jQuery

$( document ).ready( function() {
    $( 'img' ).wrap( $( '<span></span>' )); //이미지뒤에 검은 배경추가
    $( 'a' ).addClass('photo'); //a에 photo 클래스 추가
    $('.photo span, img').attr('onclick',' '); // safari hover 
});
});

css

.photo img, .photo span{
  display: none;
  width: 50vw;
  position: fixed;
}  /*이미지와 검은배경*/

.photo img {
  top: 50%;
  left: 50%;
  transform-origin: left top;
  transform: translate(0%, -50%);
} /*이미지*/

.photo span{
  height: 100vh;
  left: 50%;
  top: 0%;
  background-color:black;
  overflow: hidden;
} /*이미지 검은배경*/

.photo:hover img, .photo:hover span{
  display: inline-block;
} /*이미지 호버시 보임*/
  • (•́ ✖ •̀)
    알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)