2016-10-05 1 views
0

아래 링크의 시나리오를 사용해 보았을 때 텍스트 위로 마우스를 가져 가면 숨겨진 텍스트가 표시됩니다. 그것은 텍스트와 잘 작동하지만 내 클라이언트가 필요로하는 것은 webbot HitCounter를 숨기고 마우스를 올려 놓았을 때 보여줍니다. 어떤 도움이라도 대단히 감사하겠습니다. CSS의 숨겨진 웹봇 표시

Show hidden text on hover (CSS)

<div id="DivForHoverItem"> 
      <div id="HiddenText"><p class="auto-style4"> 
       <!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div> 
      </div> 
     </div> 

CSS 코드 :

/* Div for hover item */ 
#DivForHoverItem { 
    height: 50px; 
    width: 300px; 
    background-color: black; 
    text-align:center; 
} 

#HiddenText { 
    display:none; 
} 

#DivForHoverItem:hover #HiddenText { 
    display:block; 
} 
+1

당신이 실제로 묻는 것이 불분명합니다. css를 사용하여 텍스트 또는 콘텐츠를 숨기는 방법을 알고 있다면 div가 보유한 콘텐츠에 관계없이 텍스트 또는 콘텐츠를 숨길 수 있습니다. 그럼 여기서 실제 질문은 무엇입니까? – arkascha

+1

실제로 원하는 것을 이해하는 것이 어렵습니다. –

+0

카운터가 보이지 않을 때 마우스가 "webbot"위에있을 때 내 클라이언트가 실제로 필요로하는 것, 카운터를 보여줍니다. –

답변

1

레이아웃에서 (DIV 공간을 차지하지 않는) display:none이 요소를 "제거"기억하십시오. 따라서 커서를 가리 키지 않아도됩니다 (고정 된 크기로 다른 div div/div를 만들지 않거나 다른 요소의 js 및 조건에 gettinng하지 않음). 그러면 호버 효과가 시작됩니다.

어쩌면 외부 래퍼 div? 어쩌면 visibility: hidden의 자리에 display:none? Z-Index을 변경 하시겠습니까? 또는 호버시 알파 투명도가 변경된 카운터 상단의 다른 div (배경 솔리드로 덮음) (CSS 애니메이션을 페이드 아웃하는 경우조차도)?

+0

나는 가시성을 대체하려고 시도했다. 숨김, 여전히 결과에 변화가 없다. Z- 인덱스 변경의 예를 들어 주시겠습니까? –

+0

숨김은 z- 인덱스 : -99로 표시하고 z- 인덱스로 표시 : 99 –