게시판 제목 미리보기에 대해서 질문을 드려요~~

게시판 제목 미리보기에 대해서 질문을 드려요~~

QA

게시판 제목 미리보기에 대해서 질문을 드려요~~

본문

쇼핑몰 게시판에서 미리보기 창을 하려고 하는데요..

 

지금 현재로는..아래 그림과 같이..미리보기 창이 뜹니다요...

제목에...마우스를 올리면..미리보기 창이 뜨는데...이게..딱히 위치 설정이 없기때문에..

그냥 제목을 기준으로 그 아래로 펼쳐지고 있어요.

 

3690604471_1634444109.7474.png

 

 

 

예를들어서 5번글에 마우스를 대었을때...이 부분을..아래처럼..조금 위로 위치를 올리고 싶거든요...

 

3690604471_1634444180.0786.png

 

즉.. 다시 말해서..위치를 조금 올리고 싶어요.

 

3690604471_1634444248.7899.png

 

근데..제가 기본적으로..잘 몰라서..이것저것..구경하면서 소스 뜯고..끼워보고 하는 막작업인지라..

굉장히 어려움을 겪고 있습니당~

 

 

css부분은

============================================

.fast_content{

    position:absolute;
    width:auto;
    height:auto;
    display: none;
    padding: 10px;
    margin-bottom: 0px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #fff;
    background-color: #000;
    border-color: #000;
    z-index: 10;
}

============================================

 

스크립트 부분은

============================================

<div class="content" id="content_<?php echo $i; ?>"><?php echo $list[$i]['wr_content'] ?></div>

<script>

$('#fast_a_<?php echo $i; ?>').hover(function() {

$('#content_<?php echo $i; ?>').css('display','block');

}, function() {

$('#content_<?php echo $i; ?>').css('display','none');

});

</script>

============================================

 

이렇게 사용을 하고 있는데요..

 

position:absolute; 에서 left와 top을줘봤더니..

 

1번부터 5번까지 모든 게시물의 미리보기가.. 각 게시물 제목에 따라 나오는게 아니라..

설정된 특정위치로만 나오더라구요..

 

1번부터 5번 게시물이..top left로 설정된 특정위치에 5개가 모두..마우스를 호버할때마다 그쪽으로만 나오네요..

 

게시물 하나하나에 따른게 아니게 나와서..이걸 어찌해야하나 고민하고 있어요..

 

혹시 아시는분은 조언을 좀 해주셨으면 하는 바램입니다~~~ 아니면 공부를 좀 해볼수 있게..

어떤 자료라도 있었으면 좋겠네요..

이 질문에 댓글 쓰기 :

답변 1

$('#content_<?php echo $i; ?>').addClass('추가할클래스');

$('#content_<?php echo $i; ?>').removeClass('삭제할클래스');

 

이런식으로 해당 오브젝트에 클래스를 주었다가 뺐다가 처리해보세요.

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

회원로그인

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