JavaScript 마우스 오버시 이미지 안쪽에 테두리주기의 소스를 이미지에 적용을 했습니다.
마우스를 오버시 원래의 이미지가 커집니다.이미지 변동이 없게 하려면 어떻게 해야 하는지요?
|
답변 2개 / 댓글 1개
채택된 답변
+20 포인트
2016-09-28 (수) 16:37:42
<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 로 사용하세요
2016-09-28 (수) 12:28:13
아래처럼 css 로 효과 줘도 됩니다.
<style>
.img img { margin:2px ; border:2px solid #fff; }
.img img:hover { margin:2px ; border:2px solid #000; }
</style>
<div class="img">
이미지
</div>
답변에 대한 댓글 1개
2016-09-28 (수) 12:37:05
답변을 작성하려면 로그인이 필요합니다.
<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>