Вот такой код. Хочу чтобы при наведении кнопка была другого цвета. Но почему-то при наведении цвет работает, только когда активный iput, тогда цвет при наведении работает, а когда скрыта, то нет.
<div id="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="Вы что-то ищите ?"><button type="submit" class="search_button" name="submit" value="Search"><i class="fa fa-search"></i></button>
</form>
</div>
#wrap {
margin: -5px 0 0;
display: inline-block;
position: relative;
height: 40px;
float: right;
padding: 0;
position: relative;
}
input[type="text"] {
background: none;
border: medium none;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Lato";
font-size: 20px;
height: 30px;
outline: medium none;
padding: 3px 24px 3px 3px;
position: absolute;
right: 0;
top: 0;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s;
width: 0;
z-index: 3;
font-weight: 2px;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[placeholder]{
color:#fff;
}
input[type="text"]:focus {
width: 350px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="text"]::-moz-placeholder{
color: #fff;
}
input[type="text"]::-webkit-input-placeholder {
color: #fff;
}
.search_button{
color: #fff;
}
.search_button {
height: 30px;
width: 30px;
font-size: 20px;
background: none;
display: inline-block;
float: right;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
cursor: pointer;
transition: all .4s ease;
}
.search_button:hover {
color: #000;
}
Простой
Средний
