JavaScript 마우스 오버시 이미지 안쪽에 테두리주기
본문
JavaScript 마우스 오버시 이미지 안쪽에 테두리주기의 소스를 이미지에 적용을 했습니다.
마우스를 오버시 원래의 이미지가 커집니다.이미지 변동이 없게 하려면 어떻게 해야 하는지요?
답변 2
<style>
.img { width:100px; height:100px; margin:2px ; border:2px solid #000; }
.img:hover { margin:2px ; border:2px solid #888; }
</style>
<div class="img">
이미지
</div>
스크립트 지우시고 css 로 사용하세요
아래처럼 css 로 효과 줘도 됩니다.
<style>
.img img { margin:2px ; border:2px solid #fff; }
.img img:hover { margin:2px ; border:2px solid #000; }
</style>
<div class="img">
이미지
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>이미지 마우스 오버시 이미지 안쪽에 테두리 주기</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css" media="screen">
a.innerborder, a.innerborder img {
float: left;
overflow:hidden;
}
a.innerborder:hover {
border:4px solid #f00;
}
a.innerborder:hover img {
margin: -4px;
}
</style>
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>