html 마우스오버 코딩 질문

html 마우스오버 코딩 질문

QA

html 마우스오버 코딩 질문

본문

adf7baaeeadadf7e6072f68b8b0acfc9_1486433149_3032.jpg 

<head>

<style>

#bg { background-color:yellow;}

#top {width:100%; height:200px; background-color:#000; background-repeat: no-repeat;}

#footer { width:100%; height:100px; background-color:#000;}

#main { width:100%; height:640px; line-height:700px; text-align:center;}

li{list-style: none; border:1px solid #000; width:200px; height:200px; display:inline-block; margin-left:20px; 

 

background-color:#FFF;}

li:hover { background-color:red; width:200px; height:200px;}

.a { width:200px; height:100px;}

.b { width:200px; height:100px;}

</style>

</head>

<body>

<div id="bg">

<div id="top"> </div>

<div id="main"> 

<ul>

<li><a></a></li>

<li><a></a></li>

<li class="a"><a></a></li>

<li class="b"><a></a></li>

</ul>

 

</div>

 

<div id="footer"></div>

</div>

</body>

 

현재 까지 제가 만든 소스입니다

 

이미지와 같이 img3과 img4를 저렇게 만들고싶은데 어찌해야할지모르겠습니다.

 

또한 아직마우스오버를 적용안했으나 hover 나 mouseover를 적용할시 img3에 마우스를 올릴시 img4가 사라지고 img1,2만큼 커지게 img4를 마우스에 올릴시 img3은 사라지고 img1,2 만 커지게 어떻게 하나요..?

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 6
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT