수다닷컴

  • 해외여행
    • 괌
    • 태국
    • 유럽
    • 일본
    • 필리핀
    • 미국
    • 중국
    • 기타여행
    • 싱가폴
  • 건강
    • 다이어트
    • 당뇨
    • 헬스
    • 건강음식
    • 건강기타
  • 컴퓨터
    • 프로그램 개발일반
    • C언어
    • 비주얼베이직
  • 결혼생활
    • 출산/육아
    • 결혼준비
    • 엄마이야기방
  • 일상생활
    • 면접
    • 취업
    • 진로선택
  • 교육
    • 교육일반
    • 아이교육
    • 토익
    • 해외연수
    • 영어
  • 취미생활
    • 음악
    • 자전거
    • 수영
    • 바이크
    • 축구
  • 기타
    • 강아지
    • 제주도여행
    • 국내여행
    • 기타일상
    • 애플
    • 휴대폰관련
  • 프로그램 개발일반
  • C언어
  • 비주얼베이직

css 마우스오버 이미지 확대 질문입니다.

재바우

2023.04.01

안녕하십니까, 이제는 css 질문입니다.
이것땜에 거의 12시간 헤매고 있습니다. 아.. 우울합니다.
css hover를 이용 위에있는 각 이미지에 마우스 오버하여 하면
다른 이미지가 (같은 이미지 원본도 됨) 밑에 있는 흰 공간(id=content)에 위치하여 오게 해야합니다.
어찌 해야할지 몰라 검색하고 해봐도 어떻게 display:none 하고 다시 보여줘야할 지 몰라
답답한 마음에 올리게 되었습니다.
소스는...아래 입니다.
고수님들의 가르침을 얻습니다.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title김태희/titlestyle type=text/css

body { margin: 0;/*웹브라우저들 마다 body 엘레멘트의 기본 마진 크기가 약간씩 차이 나기 때문에*/ padding: 0; /*만약 body에 마진을 줄 필요가 있다면 body 자체에 마진을 주기 보다*/ background: #FCF; /*그 하위 엘레멘트의 마진 크기를 조절하는 방법이 더 좋습니다.ex) wrap*/}#wrap { width: 900px; padding: 0; margin: 0 auto; margin-top: 0px;/*height:600px;*/
}#header h3 { margin: 0; padding: 10px; font-family: 굴림; font-size: 12px;}
#pics { display: block; background-color:#369; clear:both;}#pics ul { padding: 0; margin: 0; list-style: none;}#pics ul li { margin: 0; display: inline; float: left}.polaroid { top: 0px; width: 160px; padding: 10px 9px 20px 9px; background-color: #fff; -webkit-box-shadow: 5px 5px 10px #000; -moz-box-shadow: #272229 2px 2px 10px; box-shadow: #272229 2px 2px 10px;}
#content { /*border:2 solid #000*/ float:left; clear:both; margin: 0; padding: 0px; width: 900px; }#content h3 { margin: 0; padding: 10px; font-family: 굴림; font-size: 9px;}
#content.pp{ border-style: outset; border-color: #000; /*display:block;*/ width: 868px; height: 230px; padding: 10px; /*border: 1px solid #bfbfbf;*/ background-color: #fff; -webkit-box-shadow: 5px 5px 10px #000; /* 박스 그림자(가로,세로,번지기정도, 그림자색상) 크롬, 사파리*/ }

#footer { width: 900px; background: #3FF; float:left;}/*.polaroid { top:0px; width:150px; padding:10px 10px 20px 10px; border: 1px solid #bfbfbf; background-color:#fff; -webkit-box-shadow: #272229 2px 2px 10px;;;; -moz-box-shadow: #272229 2px 2px 10px; ; box-shadow: #272229 2px 2px 10px;;}*/
.caption { /* 이미지 캡션 지정 */ text-align: center; font-family: 바탕; font-weight: 600; font-size: 15px; color: #060;}.hide { display: none !important;}/style/head
bodydiv id=wrap div id=header h3태희느님/h3 /div div id=pics ul li img src=./images/tt1.png class=polaroid/ p class=caption 김태희1 /p /li li img src=./images/tt2.pngclass=polaroid / p class=caption 김태희2 /p /li li img src=./images/tt3.png class=polaroid/ p class=caption 김태희3 /p /li li img src=./images/tt4.pngclass=polaroid / p class=caption 김태희4 /p /li li img src=./images/tt5.pngclass=polaroid / p class=caption 김태희5 /p /li li img src=./images/tt6.png class=polaroid / p class=caption 김태희6 /p /li li img src=./images/tt7.pngclass=polaroid / p class=caption 김태희7 /p /li li img src=./images/tt8.pngclass=polaroid / p class=caption 김태희8 /p /li li img src=./images/tt9.png class=polaroid / p class=caption 김태희9 /p /li li img src=./images/tt10.png class=polaroid / p class=caption 김태희10 /p /li /ul /div div id=content class=pp img class= src=/div div id=footer fddd /div/div/body/html

신청하기





COMMENT

댓글을 입력해주세요. 비속어와 욕설은 삼가해주세요.

  • 아인

    음.. 그래야 되겠네요

  • 스콜피온

    스크립트나 제이쿼리를....쓰시길 바래옹~

  • 벤자민

    그런가요 ㄷㄷ;;

  • 연분홍

    css로 가능하나요?
    스크립트 써야 할것 같은데

번호 제 목 글쓴이 날짜
2694921 보더 레이아웃 안에 플로우 레이아웃 넣는방법? 초롱 2025-05-15
2694894 웹 프로그래밍 관련해서 질문합니다. 창의적 2025-05-15
2694868 컨택트 폼 7에서 textarea 높이 조정 영글 2025-05-15
2694818 line-height값이 적용이 안되는데 왜 그런 거예요?. letter-spacing,line-height의 기준?? (2) 풍란 2025-05-14
2694795 이것 어떻게 좀 해결좀;; (3) 개럭시 2025-05-14
2694724 코딩시 폰트 문제; ㅠ 후력 2025-05-13
2694696 텍스트박스 입력에 관한 문제입니다. 딥공감 2025-05-13
2694668 [질문] 페이퍼비전 PointLight 관련 질문 드려요.. 두바다찬솔 2025-05-13
2694611 Flash Lite 2.1에서 BitmapData와 Matrix 지원안하나요? (3) 이플 2025-05-12
2694582 IE & 파이어폭스 (2) 흙이랑 2025-05-12
2694553 무비클립안의 duplicate 발동이 안돼네요; 딥보라 2025-05-12
2694523 자바 애플릿 질문좀 ^^ (6) 동이 2025-05-12
2694494 [질문] JAVA 또는 C++ 로 프로그램 개발시.. 레지스터리 등록 관련 의문점? (3) 우람늘 2025-05-11
2694469 익스6에서 css버그 나오는것 해결방법좀요 !!!! (6) 원술 2025-05-11
2694442 로컬에선 잘 나오는데 운영에 반영하면 이상하게 나와요. (8) 목화 2025-05-11
2694412 [질문] 이미지 로딩후 사이즈 조절할때 (1) 아담 2025-05-11
2694391 설치형 블로그 쓰시는 분들 어떤거 쓰세요?? (7) AngelsTears 2025-05-10
2694362 Microsoft SQL Server에서 서버만드는법 어둠 2025-05-10
2694333 for문으로 돌린 이름의 제어 (4) 레이 2025-05-10
2694308 이미지 css 도와주세요 ㅠㅠ (2) 애기 2025-05-10
<<  이전  1 2 3 4 5 6 7 8 9 10  다음  >>

수다닷컴 | 여러분과 함께하는 수다토크 커뮤니티 수다닷컴에 오신것을 환영합니다.
사업자등록번호 : 117-07-92748 상호 : 진달래여행사 대표자 : 명현재 서울시 강서구 방화동 890번지 푸르지오 107동 306호
copyright 2011 게시글 삭제 및 기타 문의 : clairacademy@naver.com