html - 悬停在文本框上时显示关闭图标 div

Question

我有文本框。当我将鼠标悬停在它上面时，关闭图标 div 应该出现在 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;
}

 <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>

字母 X 应该位于 show_close_div 的中心。

任何帮助都会很棒。

谢谢。

Answer 1

.display_close:hover .show_close_div 替换为 .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>

在这里输入代码