Помогите с hover

Тема в разделе "Верстка", создана пользователем sarootua, 12 апр 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. sarootua

    sarootua

    Регистр.:
    24 окт 2013
    Сообщения:
    230
    Симпатии:
    214
    Есть поле ввода поискового запроса
    html
    <div class="form-search">
    <input id="search" type="text" class="input-text" name="q" value="" autocomplete="off">
    css
    .header .form-search input {
    1. width: 335px;
    2. margin-right: -4px;
    3. color: #ccc;
    4. height: 33px;
    5. line-height: 22px;
    6. font-size: 14px;
    7. padding: 0 0 0 0px;
    8. padding-left: 10px;
    9. background: url(../images/sa/bg-pinstripe-gray.png);
    }

    И есть блок "популярных запросов"
    Html
    <div class="search_term">
    <div id="popSearchTerms">
    <ul class="term-list">
    <li class="icon-term">Популярные запросы:</li>
    <li><a href="http://****.com/catalogsearch/result/?q=4">4</a></li>
    <li><a href="http://****.com/catalogsearch/result/?q=Bat">Bat</a></li>
    <li><a href="http://***.com/catalogsearch/term/popular/">Еще »</a></li>
    </ul>
    </div>
    </div>

    css прописан по умолчанию
    .search_term{
    padding:4px 0 0 0; float:left; overflow:hidden;
    width: 575px;
    margin-left: 1px;
    height: 285px;
    border-top-width: 10px;
    margin-top: 10px;
    box-shadow: 2px 2px 3px #ddd;
    padding-top: 0px;
    z-index: 999;
    position: absolute;
    background: white;
    display: none;
    }
    нужно что бы при наведении мышки в поле ввода запроса отобразился блок популярных запросов
    т.е.
    .search_term{display: block;}
    Я что то не пойму что делаю не так
    .header .form-search:hover .search_term {display:block;} не работает
     
  2. dema8912

    dema8912 Писатель

    Регистр.:
    22 мар 2012
    Сообщения:
    7
    Симпатии:
    0
    Может и не работать, смотря как эти 2 блока в html относительно друг друга стоят... если .search_term внутри .header .form-search то ваш цсс будет работать... а вообще посмотреть бы ссылку хотелось
     
  3. loasa

    loasa Создатель

    Регистр.:
    27 мар 2012
    Сообщения:
    41
    Симпатии:
    25
    Тут думаю нужно в сторону js копать
     
  4. Shadez

    Shadez Писатель

    Регистр.:
    10 апр 2014
    Сообщения:
    1
    Симпатии:
    0
    Чтобы правило
    Код:
    .header .form-search:hover .search_term {display:block;}
    работало, div.search_term должен находиться внутри div.form-search