CSS 투명한 호버 효과 2

컴프

· 8년 전 · 조회 3245 3245

CSS 투명한 호버 효과

첫 번째 CSS 블록은 예제 1의 코드와 유사합니다. 또한 사용자가 이미지 중 하나를 가리키면 어떻게 될지 추가했습니다. 이 경우 사용자가 이미지를 가리킬 때 이미지가 투명하게 보이지 않도록해야합니다. 이것에 대한 CSS가 opacity:1;있습니다.

마우스 포인터가 이미지에서 멀리 떨어지면 이미지가 다시 투명 해집니다.

역전 호버 효과의 예 :

예

img:hover {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}

<!DOCTYPE html>

<html>

<head>

<style>

img:hover {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>

</html>

이미지 투명도

불투명도 속성은 마우스 오버시 불투명도를 변경하기 위해 종종 : 호버 선택기와 함께 사용됩니다.

참고 : IE에서 : ! DOCTYPE을 추가하여 : hover 선택기가 a 요소가 아닌 다른 요소에서 작동해야합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
1247	레이아웃	로딩 타입 1번 스킨 및 코드 링크로 들어와서 긁어가세요. [10]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1612
1246	레이아웃	로딩 타입2(어제에 이어서... 그리고 개발자 설명 추가) [11]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1221
1245	레이아웃	버튼 UI(hover시 테두리 애니메이션 및 색깔변경) [3]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1994
1244	레이아웃	로딩 타입5(글자 귀엽게 통통 요청사항) [4]	돈도없어개발하기도시러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1510
1243	HTML	스크롤다운시 모션효과	조아웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1675
1242	HTML	안드로이드 아이폰 기기별 SMS 문자버튼	godmin 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	997
1241	HTML	간단한 FLEX 예제	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1188
1240	HTML	간단한 반응형 페이지 레이아웃 [1]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1210
1239	HTML	간단한 Flex 활용 예제 [1]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1799
1238	CSS	가운데 정렬. 가장 심플?(정리) [1]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1309
1237	CSS	textarea의 이런 트릭? 들어보지도 못했던? [2]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1778
1236	CSS	css의 상속에 관한 팁입니다. [3]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1735
1235	HTML	구글 검색 최적화하는 태그 입니다. [2]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1200
1234	기타	GNUBOARD5에서 SVG 로딩바로 백로딩을 띄우는 코드에요 [2]	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	885
1233	CSS	aspect-ratio 활용하기	제작관리홍보까지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1115
1232	기타	준비중, 공사중 임시페이지 - 마우스에 반응하며 움직이는 기하학 배경 [2]	웹사이팅 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2135
1231	CSS	개인적으로 꼭 이해하고 넘어가야 할 것 3가지 [8]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1915
1230	CSS	progress 엘레먼트의 스타일링 [3]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1922
1229	반응형	[bootstrap5] 모바일에서 br태그 줄바꿈 기능 없애기	까투리장끼 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1223
1228	반응형	모바일에서 br태그 줄바꿈 기능 없애기 [7]	탈환대 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	4172
1227	웹접근성	웹 표준 검사하기	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1725
1226	반응형	반응형을 위한 미디어쿼리 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2001
1225	CSS	Animation 동작 효과 주기 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1561
1224	HTML	버튼 클릭시 리스트 스크롤 상단으로 이동하기	탈환대 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1662
1223	HTML	모바일 정회원 가입페이지 만들어주실분 있을까요?? [1]	위치앱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1385
1222	CSS	body 외부 정렬	EI소프트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1383
1221	CSS	이미지 비율대로 리사이징 하기 [1]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1671
1220	CSS	flex 레이아웃 [1]	네이비블루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2026
1219	CSS	flex 개념 이해하기 좋은 사이트 [4]	생선구이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1632
1218	기타	howler.js [2]	min0000 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2490