Notice
Recent Posts
Recent Comments
Link
땀나는 애
[html+css]hover_이미 hover시 다른 이미지 바뀜 본문
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=1.0, user-scalable=yes">
<meta name="title" content="동래구청">
<meta name="keywords" content="동래구청">
<meta name="description" content="동래구청 홈페이지에 오신것을 환영합니다.">
<!-- base -->
<title>동래구청 홈페이지에 오신것을 환영합니다.</title>
<style>
/* mc_often */
#mc_often { width:900px; height:290px; transition:height 2s ease-in-out; box-shadow:0 10px 20px rgba(0,0,0,0.2); }
#mc_often { background:#fff; }
#mc_often li { float:left; width:180px }
#mc_often li a {position:relative; display:block; height:145px; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0; text-align:center;text-decoration:none;transition:border-color .3s, background .3s; font-size: 14px; background:#fff;}
#mc_often li span {display:inline-block;position:relative;top:27px;padding-top:70px;background-size:62px 1800px;background-repeat:no-repeat;transition:background-position .3s}
#mc_often li a:hover, #mc_often li a:active, #mc_often li a:focus {color:#fff;background:#4192e3;/*6282be*/;font-weight:700}
#mc_often li.bg1 span {background-position:50% 0}
#mc_often li.bg1 a:hover span, #mc_often li.bg1 a:active span, #mc_often li.bg1 a:focus span {background-position:50% -80px}
#mc_often li.bg2 span {background-position:50% -160px}
#mc_often li.bg2 a:hover span, #mc_often li.bg2 a:active span, #mc_often li.bg2 a:focus span {background-position:50% -245px}
#mc_often li.bg3 span {background-position:50% -340px}
#mc_often li.bg3 a:hover span, #mc_often li.bg3 a:active span, #mc_often li.bg3 a:focus span {background-position:50% -430px}
#mc_often li.bg4 span {background-position:50% -520px}
#mc_often li.bg4 a:hover span, #mc_often li.bg4 a:active span, #mc_often li.bg4 a:focus span {background-position:50% -599px}
#mc_often li.bg5 span {background-position:50% -690px}
#mc_often li.bg5 a:hover span, #mc_often li.bg5 a:active span, #mc_often li.bg5 a:focus span {background-position:50% -780px}
#mc_often li.bg6 span {background-position:50% -870px}
#mc_often li.bg6 a:hover span, #mc_often li.bg6 a:active span, #mc_often li.bg6 a:focus span {background-position:50% -940px}
#mc_often li.bg7 span {background-position:50% -1040px}
#mc_often li.bg7 a:hover span, #mc_often li.bg7 a:active span, #mc_often li.bg7 a:focus span {background-position:50% -1130px}
#mc_often li.bg8 span {background-position:50% -1240px}
#mc_often li.bg8 a:hover span, #mc_often li.bg8 a:active span, #mc_often li.bg8 a:focus span {background-position:50% -1330px}
#mc_often li.bg9 span {background-position:50% -1440px}
#mc_often li.bg9 a:hover span, #mc_often li.bg9 a:active span, #mc_often li.bg9 a:focus span {background-position:50% -1530px}
#mc_often li.bg10 span {background-position:50% -1650px}
#mc_often li.bg10 a:hover span, #mc_often li.bg10 a:active span, #mc_often li.bg10 a:focus span {background-position:50% -1740px}
@media all and (max-width: 970px) {
.floor2 .minwon_tit { display:none; }
#mc_often { width:100%; }
#mc_often li { width:20% }
.floor2 { padding:20px 0; }
.floor2 .banner_link li { width:50%; margin-left:0px;}
}
@media all and (max-width: 640px) {
#mc_often { height:435px; }
#mc_often li { width:33.3% }
.floor2 .banner_link li.c01,
.floor2 .banner_link li.c02,
.floor2 .banner_link li.c03,
.floor2 .banner_link li.c04 { background-image:none; }
}
</style>
</head>
<body id="main">
<main>
<div class="floor2">
<div class="minwon_cont">
<!-- 민원퀵링크 -->
<section id="mc_often">
<h3 style="display:none">민원서비스</h3>
<ul>
<li class="bg1"><a href="" target="_blank"><span>인터넷민원발급</span></a></li>
<li class="bg2 mo-hidden"><a href="" target="_blank"><span>지방세납부</span></a></li>
<li class="bg3 mo-hidden"><a href="" target="_self"><span>민원사무편람(민원서식)</span></a></li>
<li class="bg4"><a href="" target="_self"><span>지방세 상담안내</span></a></li>
<li class="bg5"><a href=""><span>무인민원발급안내</span></a></li>
<li class="bg6"><a href="" target="_self"><span>여권발급안내</span></a></li>
<li class="bg7"><a href=""
target="_blank"><span>현수막신청</span></a></li>
<li class="bg8"><a href="" target="_blank"><span>동래구자원봉사센터</span></a></li>
<li class="bg9"><a href="" target="_blank"><span>건축행정시스템</span></a></li>
<li class="bg10 mobile_skip"><a href=""><span>대형폐기물수거</span></a></li>
</ul>
</section>
<!-- //민원퀵링크 -->
</div>
</div>
</main>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'쭈구리 코딩 > 내가 보고 쓰려고 모은 것' 카테고리의 다른 글
| [html+css] 반응형_테이블 (0) | 2019.12.31 |
|---|---|
| [html+css] hover_ 이미지hover시 올라가기up (0) | 2019.12.31 |
| [Script] dropdown menu_드롭다운메뉴 2,3뎁스 (0) | 2019.12.31 |
| [script] toggle_아코디언+옆에 화살표 바뀜 (0) | 2019.12.31 |
| [script] toggle _아코디언+active (0) | 2019.12.31 |