호버시 "닫기"아이콘 표시

나는에 의해 분명하게 구성된 뉴스 피드를 가지고 있습니다. 사용자가 각 항목을 가리키면 배경이 강조 표시됩니다. 또한 각 항목의 오른쪽 상단에 작은 "x"를 표시하고 싶을 때만 나타납니다. 이 "x"는 해당 게시물을 삭제하는 삭제 버튼입니다.호버시 "닫기"아이콘 표시

는 지금은 그냥 기본 HTML 주장이 있습니다 <div class="hide-button"><a href="#">x</a></div>

나는 내가 HTML에 표시되는 'x'를하지 않을 것을 알고,하지만 오히려 CSS에 있습니다. 따라서 호버링을 위해 아래에 <li> CSS가 있으며 숨기기 버튼 용 CSS도 있습니다. 나는 <li>

.hide-button { 
    float: right; 
    margin-top: -13px; 
    font-size: 11px; 
    font-family: helvetica; 
    color: gray; 
} 

.hide-button a{ 
    text-decoration: none; 
    color:gray; 
} 

.hide-button a:hover { 
    text-decoration: underline; 
    color:gray; 
}

하고 목록에 숨기기 버튼 사업부를 통합하는 가장 좋은 방법을 알고 싶습니다 :

.newsfeedlist li { 
    background: white; 
    border-bottom: 1px solid #E4E4E4; 
    padding: 12px 0px 12px 0px; 
    overflow: hidden; 
} 

.newsfeedlist li:hover { 
    background-color: #F3F3F3; 
}

너무 감사합니다 !!!!!

출처

2011-07-29 sthomps

HTML을 추가 할 수 있습니까? 지금까지 가지고있는 것의 [jsFiddle 데모] (http://jsfiddle.net/)도 도움이 될 것입니다. – thirtydot

물론 나에게 줘 – sthomps

가정하면 당신의 삭제 버튼은 기본적으로 다음 숨겨진 목록 항목에 유혹 할 때 주변에 다시 디스플레이를 설정할 수 닫기 버튼을 수정

.hide-button { 
    float: right; 
    margin-top: -13px; 
    font-size: 11px; 
    font-family: helvetica; 
    color: tray; 
    display: none; 
} 

... the other bits of CSS ... 

.newsfeedlist li:hover .hide-button { 
    display: block; 
}

같은 것을 할 수있는 다른 컨테이너 내부에 단추. Demo at jsFiddle.net 나는 예를 수정하고 여러 콘텐츠 영역이나 이미지 그것을 tushed :

희망이 의미

팀

출처

2011-07-29 22:58:54

당신은 초인간주의 Tim입니다, 감사합니다. 매우 간단한 솔루션이지만 완벽하게 작동합니다. 정말 고마워!!!! – sthomps

문제 없습니다. 다른 사람들이이 질문에 답할 수 있도록 답을 표시하는 것을 잊지 마십시오. 팀. –

그래, 그렇게하려면 5 분을 기다려야 해. 이제 끝내야 해. Tx – sthomps

그러나 li에서 hide-button 요소는

.newsfeedlist li:hover .hide-button { 
    display: inline-block; 
}

을하고 그렇지 않으면 항상 자바 스크립트 거기 display: none;

.hide-button에 추가 할 수 있습니다.

출처

2011-07-29 22:58:52

고마워! 위와 같고 그 이유 : D – sthomps

당신은 정말이 필요에있을 수 있습니다한다.

출처

2012-05-16 11:17:04 Peter

닫기 아이콘의 클릭에 대한 이벤트를 추가하여 상위 컨테이너를 숨 깁니다. [http://jsfiddle.net/DrkwB/4/]에서 데모를 참조하십시오. – Peter

호버시 "닫기"아이콘 표시

답변

관련 문제