css 질문드립니다..

css 질문드립니다..

QA

css 질문드립니다..

본문


.bxslider-wrap .bx-wrapper .bx-prev {left:50%; margin-left: -670px;  background: url('/SkinImg/btn_left1.png') no-repeat 0 0;}
.bxslider-wrap .bx-wrapper .bx-next {right:50%; margin-right: -670px; background: url('/SkinImg/btn_right1.png') no-repeat 0 0;}
.bxslider-wrap .bx-wrapper .bx-prev{-webkit-transition : all 0.3s ease;
-khtml-transition : all 0.3s ease;
-moz-transition : all 0.3s ease;
-ms-transition : all 0.3s ease;
-o-transition : all 0.3s ease;
transition : all 0.3s ease; visibility:hidden; opacity:0; filter: alpha(opacity=0);}
.bxslider-wrap .bx-wrapper .bx-next{-webkit-transition : all 0.3s ease;
-khtml-transition : all 0.3s ease;
-moz-transition : all 0.3s ease;
-ms-transition : all 0.3s ease;
-o-transition : all 0.3s ease;
transition : all 0.3s ease; visibility:hidden; opacity:0; filter: alpha(opacity=0);}
.bxslider-wrap .bx-wrapper:hover .bx-prev{margin-left: -670px; visibility:visible; opacity:1; filter: alpha(opacity=100);}
.bxslider-wrap .bx-wrapper:hover .bx-next{margin-right: -670px; visibility:visible; opacity:1; filter: alpha(opacity=100);}

@media screen and (max-width: 1340px) {
.bxslider-wrap .bx-wrapper .bx-prev {left:-45%; margin-left: -45%;    }
.bxslider-wrap .bx-wrapper .bx-next {right:-45%; margin-right: -45%;  }
.bxslider-wrap .bx-wrapper:hover .bx-prev{margin-left: -48%; visibility:visible; opacity:1; filter: alpha(opacity=100);}
.bxslider-wrap .bx-wrapper:hover .bx-next{margin-right: -48%; visibility:visible; opacity:1; filter: alpha(opacity=100);}

 

 

css코드인데요... 투명함을 없애려면 어떤걸조정해야할까요..

마우스 오버해야지만 버튼이 나오는데...

마우스 오버없이도 버튼이 나와있는상태이고싶거든요 ㅠㅠ

이 질문에 댓글 쓰기 :

답변 4

코드 정리하면 아래와 같거든요. 거기서 삭제할 것 주석처리해놨어요


.bxslider-wrap .bx-wrapper .bx-prev {
    left: 50%;
    margin-left: -670px;
    background: url('/SkinImg/btn_left1.png') no-repeat 0 0;
}
.bxslider-wrap .bx-wrapper .bx-next {
    right: 50%;
    margin-right: -670px;
    background: url('/SkinImg/btn_right1.png') no-repeat 0 0;
}
.bxslider-wrap .bx-wrapper .bx-prev {
    -webkit-transition: all 0.3s ease;
    -khtml-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    visibility: hidden; /* 이 줄 삭제 */
    opacity: 0; filter: alpha(opacity=0);  /* 이 줄 삭제 */
}
.bxslider-wrap .bx-wrapper .bx-next {
    -webkit-transition: all 0.3s ease;
    -khtml-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    visibility: hidden; /* 이 줄 삭제 */
    opacity: 0; filter: alpha(opacity=0); /* 이 줄 삭제 */
}
.bxslider-wrap .bx-wrapper:hover .bx-prev {
    margin-left: -670px;
    visibility: visible;
    opacity: 1; filter: alpha(opacity=100);
}
.bxslider-wrap .bx-wrapper:hover .bx-next {
    margin-right: -670px;
    visibility: visible;
    opacity: 1; filter: alpha(opacity=100);
}
@media screen and(max-width: 1340px) {
    .bxslider-wrap .bx-wrapper .bx-prev {
        left: -45%;
        margin-left: -45%;
    }
    .bxslider-wrap .bx-wrapper .bx-next {
        right: -45%;
        margin-right: -45%;
    }
    .bxslider-wrap .bx-wrapper:hover .bx-prev {
        margin-left: -48%;
        visibility: visible;
        opacity: 1; filter: alpha(opacity=100);
    }
    .bxslider-wrap .bx-wrapper:hover .bx-next {
        margin-right: -48%;
        visibility: visible;
        opacity: 1; filter: alpha(opacity=100);
    }
}

와 팻시님 이걸 정리해주시네요 대단하십시오..

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

회원로그인

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