div와 css를 통한 삼각형 만들기 및 jquery 로 마우스 오버 아웃 (css 삼각형, jquery hover)으로

div와 css를 통한 삼각형 만들기 및 jquery 로 마우스 오버 아웃 (css 삼각형, jquery hover)

이온디 2135

마우스를 올리면 해당 레이어 아래에 있는 특정 요소가 나타났다 사라졌다 하는 소스입니다.

나타나는 작은 삼각형은 div와 css를 이용하여 삼각형을 만들었으며,

jquery를 이용하여 마우스 오버 했을 때 나타났다 사라졌다 하게 만들었습니다.

그 외에 레이아웃은 모바일용 레이아웃입니다. (__);;


jquery 스크립트 부분입니다.


<script type="text/javascript">
/*
 $("li").hover(function(){
$(this).css("background","#0000ff");
},
function(){
$(this).css("background","#ffffff");
});
*/
 $( document ).ready( function() {
        $( '.item' ).hover(
          function () {
            //$( '.item > .css-arrow-multicolor' ).css('display','block');
$(this).find(".css-arrow-multicolor").css('display','block');
          }, function () {
            //$( '.item > .css-arrow-multicolor' ).css('display','none');
$(this).find(".css-arrow-multicolor").css('display','none');
          }
        );
      } );


</script>


css 부분입니다.

.main-content .gnb_wrap li .css-arrow-multicolor {
display:none;
margin: 0 auto;
border-color: transparent transparent #fff transparent;
            border-style:solid;
            border-width:5px;
            width:0;
            height:0;
        }


소스는 파일 첨부했습니다. 잘 살펴보시고 유용하게 이용하세요.

css 삼각형 jquery hover
목록으로