html 마우스오버 코딩 질문

머 8년 전 조회 8,741

<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>

<ul>

</ul>

</div>

</div>

</body>

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

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

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