CSS : 이미지 링크, 마우스 오버시 변경
링크 인 이미지가 있습니다. 사용자가 링크 위로 마우스를 가져갈 때 다른 이미지를 표시하고 싶습니다.
현재이 코드를 사용하고 있습니다.
<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>
div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
하지만 많은 문제가 있습니다. div가 CSS 규칙을 선택하지 않습니다 (요소가 Firebug에서 볼 때 관련 CSS 규칙을 표시하지 않음).
(내가 아는 한) 아마도 이것은이 잘못된 HTML이기 때문이다 :이를 넣을 당신 수 없습니다 <a>주위에 <div>. 로 전환 그러나 하면 범위에 높이와 너비를 안정적으로 설정할 수<span> 없기 때문에 더 큰 문제가 발생하는을 구석으로 같습니다 .
도움! 어떻게하면 더 잘할 수 있습니까?
<a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>
링크 자체에 클래스를 사용하고 div를 잊어 버리십시오.
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
이 효과를 만들려는 위치가 몇 군데 만 권한 CSS가 필요없는 다음 html 코드를 사용할 수 있습니다. 그냥 삽입하세요.
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>
따옴표는 여기에있는 그대로 정확하게 써야합니다. 구분 작동하지 않습니다.
다음으로 <a>만 수행 할 수 있습니다 .
#twitterbird {
display: block; /* 'convert' <a> to <div> */
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
height: 160px;
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
JavaScript 또는 CSS를 통해 변경되는 문제는 연결 속도가 느리면 이미지가 마우스 오버 된 버전으로 변경되는 데 1 초가다는 것입니다. 이로 인해 하나는 사라지고 다른 하나는 다운로드 절차 플래시가 발생합니다.
내가 전에 한 두 개의 이미지가 있습니다. 그런 다음 호버 상태에 따라 행동을 숨기고 표시합니다. 이렇게하면 두 이미지를 깔끔하게 전환 할 수 있습니다.
<a href="/settings">
<img class="default" src="settings-default.svg"/>
<img class="hover" src="settings-hover.svg"/>
<span>Settings</span>
</a>
a img.hover {
display: none;
}
a img.default {
display: inherit;
}
a:hover img.hover {
display: inherit;
}
a:hover img.default {
display: none;
}
이런 식으로 요소를 설정하면 더 좋을 수 있습니다.
display:block;
그런 다음 CSS 스프라이트 로 배경을 설정하십시오.
편집 : http://jsfiddle.net/steweb/dTwtk/ 에서이 예제를 확인하십시오.
CSS없이 다음을 수행 할 수 있습니다.
<a href="ENTER_DESTINATION_URL"><img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" /></a>
예 : https://jsfiddle.net/jord8on/k1zsfqyk/
이 솔루션은 내 요구에 완벽했습니다! 여기 에서이 해결책을 찾았 습니다 .
면책 조항 : CSS없이 가능한 솔루션을 갖는 것은 저에게 중요합니다. 글로벌 CSS에 대한 액세스 권한을 제공하지 않는 Jive-x 클라우드 커뮤니티 플랫폼에서 콘텐츠를 디자인하기 때문입니다.
일반적으로 span속성을 제공하면 a display:block처럼 동작합니다 div. 즉, 너비와 높이를 설정할 수 있습니다.
또한 건너 뛸 수 있습니다 div또는 span그냥 설정 a받는 사람 display: block과에 backgound에 스타일을 적용합니다.
<a href="" class="myImage"><!----></a>
<style>
.myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.card {
width: 130px;
height: 195px;
background: url("../images/pic.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/anotherpic.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
참고 URL : https://stackoverflow.com/questions/4717117/css-image-link-change-on-hover
'ProgramingTip' 카테고리의 다른 글
| Python의 사용자 비활성화 인 시간 형식? (0) | 2020.11.29 |
|---|---|
| mysql에 금액 저장 (0) | 2020.11.29 |
| 명령 줄을 대용량 SQL 파일을 MySql로 가져 오기 (0) | 2020.11.29 |
| will_paginate 정의되지 않은 메소드`total_pages ' (0) | 2020.11.29 |
| ASCII 문자 정규식 (0) | 2020.11.29 |