hover 적용 문제(크롬에선 되는데 익스플로러에서 안 되네요)
조회수 2934회
안녕하세요. html과 css를 이용해서 기본적인 홈페이지를 만들고 있는데요. hover 적용이 같은 페이지에서 되는 것도 있고 안 되는 것도 있어서 질문드립니다. 페이지 윗부분의 네비게이션 바 같은 경우는 hover가 크롬에서도 되고 익스플로러에서도 되는데 페이지 중간부분의 이미지 hover는 크롬에서는 되는데 익스플로러에서 안 됩니다. 익스플로러 에러 문제는 종종 보이던데 저는 익스 11이라서 해당되지 않는 것 같더라고요. meta 태그에도 <meta http-equiv="X-UA-Compatible" content="IE=edge" />를 추가했는데 왜 안되는 걸까요...
html코드 해당부분은
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<section id="portfolio">
<div class="container text-center">
<h1>Portfolio</h1>
<div class="row">
<div align="center" class="col-md-4" id="pool-img">
<img src="img">
</div>
<div align="center" class="col-md-4" id="pool-img">
<img src="img">
</div>
<div align="center" class="col-md-4" id="pool-img">
<img src="img">
</div>
<div align="center" class="col-md-4" id="pool-img">
<img src="img">
</div>
<div align="center" class="col-md-4" id="pool-img">
<img src="img">
</div>
</div>
</div>
</section>
</body>
이고 css 해당부분은
#pool-img img:hover
{
-webkit-transform: scale(1.07);
transition: 0.7sec;
}
입니다.
html 코드 입력이 왜 이상하게 될까요 ㅠㅠ 
-
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
transform: scale(1.07);정의를 추가하셔야 IE에서 될겁니다. CSS 접두어에 대해 더 알아보기.pool-img img:hover로 쓰시고, 각div에서id대신class로pool-img를 쓰시기를 권장합니다. ID는 전체 문서에서 유일한 고유 객체에만 사용하는 것이 원칙이며, 클래스는 여러 객체에 재사용하라고 있는 것입니다.
댓글 입력