2013-10-07 6 views
0

Я новичок в css, у меня есть код для отображения некоторого текста при наведении. Но это не работаетhover on span не работает

HTML:

<div id="onHover"> 5 
<span> 
    <ul> 
     <li>Ankur</li> 
     <li>Dhanuka</li> 
    </ul> 
</span> 
</div> 

CSS:

#onHover span:hover 
{ 
bottom:130px; 
left:105px; 
padding:8px 8px 10px 8px; 
display:block; 
border:1px dashed #09f; 
background-color:#FFF; 
min-width:170px; 
position:relative; 
z-index:101; 
} 
#onHover span:hover ul { 
font-weight:normal; 
list-style:none; 
margin:10px 0 0 0; 
padding:0; 
position:relative; 
} 
span { 
display:none; 
} 

вы также можете увидеть эту скрипку http://jsfiddle.net/ankurdhanuka/ccFxu/

пожалуйста, помогите

Спасибо в Advance

+3

'span: hover' никогда не может быть запущен, потому что диапазон скрыт. – JJJ

+0

Пространства не могут содержать uls. – j08691

+0

@ Юхана во время паузы загрузки страницы будет скрыта, при наведении на нее должен отображаться интервал –

ответ

1

Nice Попробуйте, друг. Дайте :hover по номеру #onHover, поскольку 5 прилагается в пределах #onHover.
Используйте положение только в том случае, если это необходимо.
проверьте это. http://jsfiddle.net/ccFxu/3/

+0

он работает, но при наведении дизайна движется. где я должен указать z-index? –

+0

точно я хочу отобразить наклонный блок впереди, а не на этой странице –

+0

, если это необходимо http://jsfiddle.net/ccFxu/5/ покажет результат. удаление «position: relative;» покажет ваш результат. или там появится слайдер. :) –

5

Ваш HTML должен выглядеть так (диапазон бесполезен, поэтому я его вынул, он также не разрешен в HTML4. Именно в HTML5 Тхо ...):

<div id="onHover"> 5 
     <ul> 
      <li>Ankur</li> 
      <li>Dhanuka</li> 
     </ul> 
</div> 

Затем вы можете добавить: парить эффект на DIV, например:

#onHover ul { 
    display: none; 
} 
#onHover:hover ul { 
    display:block; 
} 

Как вы можете видеть,: парить на #onHover , но он вызывает в нем ul.

DEMO

+0

скрипка работает отлично, но она не работает в моем коде .. :( –

+0

Что вы хотите достичь? Добавьте остальные правила CSS для правила, Посмотрим, куда он пойдет не так ... – LinkinTED

+0

сделал спасибо за вашу помощь .. :) –

1

Вы устанавливаете display:none в span через CSS.

Элементы, которые установлены как display:none, не будут видны и фактически не занимают места в представлении. Следовательно, вы не можете навести курсор на span, который на самом деле недоступен из-за display:none.