Rishi Rishi - 15 days ago 6
CSS Question

show close icon div on hover on text box

I have text box. when I hover on it then close icon div should appear to the right side of the div.

I have tried this code. but somehow it didn't work.



.display_close{

}

.show_close_div{
position: absolute;
top:0px;
right:0px;
height:35px;
display:none !important ;

}

.display_close:hover .show_close_div{
display:block !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input class="form-control display_close" type="text">
<span class="input-group-addon show_close_div">X</span>





Letter X should be center of
show_close_div
.

any help would be great.

thank you.

Answer

.display_close:hover .show_close_div Replace To .display_close:hover+.show_close_div

.display_close{

}

.show_close_div{
  position: absolute;
  top:0px;
  right:0px;
  height:35px;
  display:none !important ;
  
}

.display_close:hover+.show_close_div{
  display:block !important;
}
  .input-group-addon{
 padding-right: 18px !important;;
   }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input class="form-control display_close" type="text">
                                    <span class="input-group-addon show_close_div">X</span>