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{ } .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;; }

＆＃13;

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

＆＃13;

$("#text-g").change(function() {
    $("textg").text($("#text-g").val());
});

＆＃13;

Answer 2

＆＃13;

.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;
  z-index:999;
}

＆＃13;

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

＆＃13;

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

2 个答案: