마우스를 올리면 해당 레이어 아래에 있는 특정 요소가 나타났다 사라졌다 하는 소스입니다.
나타나는 작은 삼각형은 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>
/*
$("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;
}
display:none;
margin: 0 auto;
border-color: transparent transparent #fff transparent;
border-style:solid;
border-width:5px;
width:0;
height:0;
}
소스는 파일 첨부했습니다. 잘 살펴보시고 유용하게 이용하세요.
-
1
제작의뢰
2
-
2
ai ai개발
5
-
3
레퍼런스
1
-
4
STT
9
-
5
svauth
11
-
6
개발자공모전
5
-
7
hestiacp
3
-
8
여기여기
0
-
9
TTS
6
-
10
딥러닝
7
주간 인기 검색어 상세보기
2024년 11월 04일 ~ 11월 10일
이온디에서 실시간으로 많이 검색된 검색어 순위
