[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;
} /*이미지 호버시 보임*/
-
(•́ ✖ •̀)
알 수 없는 사용자
댓글 입력