CSS 초보자가 공부하다가 지쳐서

CSS 초보자가 공부하다가 지쳐서

QA

CSS 초보자가 공부하다가 지쳐서

본문

비슷한 예제를 못찾아 질문드립니다.

 

버튼이 3개가 있습니다.

 

1번 버튼위에 마우스 오버시 1번 레이어를 보여줍니다.

 

2번 버튼위에 마우스 어버시 1번은 숨기고 2번레이어를 보여줍니다.

 

어느 버튼에 마우스를 올리든 이전 레이어 숨기고 보여줘야겠지요.

 

투명 레이어라 그냥 띄우면 겹칠테니까요?

 

즉 번갈아 가면서 이전 레이어 숨기고 해당 버튼에 지정된 레이어를 보여주려고 하는데요.

 

찾아보니 제이쿼리로 버튼의 index를 구해서 하면 가능할것 같네요.

 

에고~ 머리가 나쁘면 손발이 고생한다더니 딱 맞는 말이네요.

 

즐거운 하루되세요.

이 질문에 댓글 쓰기 :

답변 3

아직 index 개념을 이해못하신것 같으니

제이쿼리를 활용하여 아주 단순하게 짜드렸습니다.

 

<style type="text/css">
    .view2 { display: none; }
</style>
<div class="allview view1" style="width:100px; height:100px; background: #fff100;"></div>
<div class="allview view2" style="width:100px; height:100px; background: #cc0000;"></div>

<button class="btn btn-red" onmouseover="$('.allview').css('display','none'); $('.view1').css('display','block');">1번 버튼</button>
<button class="btn btn-yellow" onmouseover="$('.allview').css('display','none'); $('.view2').css('display','block');">2번 버튼</button>

 

기본 원리는

버튼 오버시 해당 클래스를 숨기고 내가 원하는 클래스만 보여지기 입니다.

원래는 index 값으로 불필요한 코드를 막는게 정론이나

위 처럼 하셔도 무방합니다.

소스가 눈에보이기 때문에 여러 방도로 활용하시면되겠습니다^^

 

w3cschool에서 기본이론으로 접근하시면 훨씬 수월하실겁니다.

저도 초보라.

흠.....각 div 영역에 id 혹은 class 부여한후 

jquery 로 $("아이디 혹은 클리스 ").show(); $("아이디 혹은 클리스 ").hide(); 이벤트를 적절히 사용하시거나 

aaa{
display : none ;

bbb{
display : block ;

 

이런식으로만든 class 를 $("아이디 혹은 클리스 ").addClass('aaa'); $("아이디 혹은 클리스 ").removeClass('aaa'); 이런식으로  적절히 붙이거나 빼는 동작을 반복하는 방법이 있습니다 
두번째 방법은 hasClass() 로 가지고있는지 분기해서 처리가능할거같고요. 
어느게 더 효율적일지는 코드 상태에 따라 다를거같네요.  

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

회원로그인

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