html 마우스오버 코딩 질문
본문
<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 만 커지게 어떻게 하나요..?
