как создать поле, которое парит над существующим текстом?

#html #css

#HTML #css

Вопрос:

Я создаю веб-сайт каталога dvd с базой данных изображений dvd и информации, такой как названия / жанр / год и т.д.

Мне нужно создать текст «Сортировать по». При наведении курсора мыши на это слово «Сортировать по», поле появится чуть ниже «Сортировать по» и будет содержать несколько текстовых гиперссылок, таких как «Название», «Жанр», «Год». Это поле должно перекрывать любые существующие изображения / тексты на веб-сайте.

Есть ли простой способ реализовать это?

1. вы смотрели на фреймворки javascript, такие как jQuery или что-то в этом роде?

2. @lbp Привет. Спасибо за ваш вклад. Я еще не проверил jQuery. Есть ли какие-либо учебные пособия по этому вопросу? Большое спасибо.

3. Вы можете найти указатели на документацию, вклады и подпроекты по адресу jquery.com .

Ответ №1:

Вот как это сделать только с помощью CSS:

HTML:

 <div class="container">
<p>Sort By</p>

<ul>
    <li>title</li>
    <li>date</li>
    <li>artist</li>
</ul>
</div>

CSS:

 .container ul {
display: none;       
}
.container:hover ul{
display: inline;  /* or block or whatever you need */
}

Вот пример: http://jsfiddle.net/9QbGn/8 / (просто наведите курсор на «сортировать по»)

1. Спасибо за ваш вклад, однако этот код всегда зависает всякий раз, когда я навожу курсор мыши на DIV. Как мне сделать так, чтобы поле появлялось только при наведении курсора на слово «Сортировать по»?

2. Вам нужно навести курсор на div, содержащий список, вот пример с несколькими элементами, каждый из которых отображает отдельный список jsfiddle.net/9QbGn/29 .

3. Кроме того, вам нужно, чтобы он продолжал парить, пока курсор находится над параметрами, не перемещая что-либо под ним, вот как: jsfiddle.net/9QbGn/30