Помогите отобразить строку поиска при наведении на значек лупы. Задействуя jQuery

Question

Помогите отобразить строку поиска при наведении на значек лупы. Задействуя jQuery

Нина Вахания Профи (565), на голосовании 7 лет назад

вот мое поле ввода: Если отобразиться корректно

/*.search{
width:690px ;
height:60px;
font-family: 'Oswald';
font-size: 19px;
color: #A9A9A9;
font-weight:normal;
position: absolute;
top:79px;
left:490px;
z-index: 11;
display: none;
}*/

Тут я что то намудрила, но все же)))

/*.list1{
background-color:#E62948;
width:50px;
background-image: url(../rock/lupa.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 18px;
height:60px;
bottom:70px;
left:780px;
}*/

Мне нужно чтобы при наведении на .list класс .search отображался.
Как такое возможно? спасибо)))

Дополнен 7 лет назад

html не отобразился но там очень мало. Обычный input у поисковика (.search)и ссылка а внутри один из пунктов списка li с классом .list

Answer 1

Jengar Гуру (3108) 7 лет назад

$('.list').mouseover(function(){
$('.search').show();
})

JengarГуру (3108) 7 лет назад

Можно даже на css реализовать

HTML

< div class="list">лупа< /div>
< input type="text" class="search">

CSS

.list:hover + .search {
display: block;
}

.search {
display: none;
}

Нина ВаханияПрофи (565) 7 лет назад

спасибо. А можно пожалуйста на пальцах?)))
В html документе в теге head прописала слово script в <> и в него вписала ваш код. библиотека jquery подключена.

Что я делаю не так? ((

Jengar Гуру (3108) вот этот код вставь между тегами head < script> $(function(){ $('.list').mouseover(function(){ $('.search').show('fast'); }); }); < /script>