Почему hover так не работает?

<div class="uk-inline">
                                <div class="th-icon-box">
                                   <ion-icon name="search" size="small" v-bind:class="style"></ion-icon> 
                                </div>
                                <div class="th-search-box">
                                    <input type="text" class="uk-input th-search-input" placeholder="{{ @message }}">    
                                </div>
                           </div>

.th-icon-box{
	color:#fff;
	margin-top: 2px;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-radius: 36px;
	text-align: center;
	background-color: #000;
	opacity: 0.3;
	-webkit-transition: 0.5s all;
	transition: 0.5s all;
	cursor: pointer;
	z-index: 3;
}
.th-icon-box:hover{
	background-color: #fff;
}
.th-search-box{
	width: 0px;
	opacity: 0;
	z-index: 2;
}
.th-icon-box:hover .th-search-box{
	width: 200px;
	opacity: 1;
	z-index: 5;
}