使用CSS

时间：2016-05-02 01:07:43

标签： html css

我有一个div，当我将鼠标悬停在div上方时，我想在div的右上角显示一个图标，边框包含div和图标，并在文本和图标之间填充。

听起来很简单，但我很难过。我可以显示图标，但不能显示在div的右上角。此外，我无法在文本和图标之间获得填充。

当我没有 moused（聚焦）div时，我正在寻求实现的目标：

enter image description here

当我 moused（聚焦）div时，以下是我想要实现的目标：

enter image description here

这是我目前拥有的jsfiddle。

任何建议都会很棒。

这是我的HTML代码：

<div id="id_div_1">
    This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. 

    <div class="remove_link">
        <span class="spacer"></span>
        <a href="#id_X_0">
            <icon class="fa fa-times-circle icon_size16"></icon>
        </a>
    </div>
</div>

这是我的CSS代码：

#id_div_1 {
    float: left; 
    direction: ltr; 
    width: 80%; 
    white-space: wrap;
    background: #fff;
}
#id_div_1:hover {
    border: 1px dashed brown;
    background: #fff;
    width: calc(80% + 10px);
}
.remove_link {
    visibility: hidden;
}
#id_div_1:hover .remove_link {
    visibility:visible;
    float: right;
    vertical-align: top;
}
.fa-times-circle {
    color: grey;
}
.fa-times-circle:hover {
    color: #cc0033;
}
.spacer {
    padding-left: 10px
}
.icon_size16 {
    font-size: 16px!important
}

2 个答案:

答案 0 :(得分：1)

备注：

  • 要将图标置于右上角，您可以使用position: absolute。确保将父元素（例如position: relative中的#id_div_1）定位以使定位生效。

  • 由于您希望在右侧填充文字，只需将padding-right添加到#id_div_1（也适用于悬停规则）。

  • 最后，您要在#id_div_1上添加透明边框，以防止文字在悬停时移动。

试试以下代码：

＆＃13;
＆＃13; 
*, :before, :after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#id_div_1 {
  position: relative;
  border: 1px solid transparent;
  width: 80%;
  background: #eee;
  padding: 5px;
  padding-right: 50px;
}
#id_div_1:hover {
  border: 1px dashed brown;
  background: #eee;
  width: 80%;
  padding: 5px;
  padding-right: 50px;
}
.remove_link {
  visibility: hidden;
  position: absolute;
  top: 4px;
  right: 6px;
}
#id_div_1:hover .remove_link {
  visibility: visible;
}
.fa-times-circle {
  color: grey;
}
.fa-times-circle:hover {
  color: #cc0033;
}
.icon_size16 {
  font-size: 16px;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div id="id_div_1">
  This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents
  of the div.

  <div class="remove_link">
    <a href="#id_X_0">
      <icon class="fa fa-times-circle icon_size16"></icon>
    </a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我认为这是你想要实现的目标： jsfiddle

HTML：

<div id="id_div_1">
This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. This is the contents of the div. 
<div class="remove_link">
    <a href="#id_X_0">
        <icon class="fa fa-times-circle icon_size16"></icon>
    </a>
</div>

CSS：

#id_div_1 {
    direction: ltr; 
    white-space: wrap;
    background: #fff;
    position: relative;
    border: 1px solid transparent;
    padding: 10px 20px 10px 10px;
}
#id_div_1:hover {
    border: 1px dashed brown;
}
.remove_link {
    visibility: hidden;
    position: absolute;
    top: 4px;
    right:5px;
}
#id_div_1:hover .remove_link {
    visibility: visible;
}
.fa-times-circle {
    color: grey;
}
.fa-times-circle:hover {
    color: #cc0033;
}
.icon_size16 {
    font-size: 16px;
}

不需要尝试左右浮动内容，而是需要使用position relative和absolute。首先，您需要将一个具有属性position: relative的类添加到您的父元素（在本例中为：id_div_1），以便您的子元素（在本例中为：remove_link）与类属性position: absolute一起工作。然后，您只需定义您希望孩子成为的位置即。上：4px;对5px;

另一方面，使用！important非常谨慎，因为它几乎覆盖了所有内容，而且往往会变得混乱。

相关问题
最新问题