html - 使用CSS将鼠标悬停在div上时在div中显示图标

Question

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

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

这是我没有将鼠标悬停(聚焦)在 div 上时想要实现的目标:

这是我将鼠标悬停在(聚焦)div 上时想要实现的目标:

这是一个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
}

Answer 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 的类添加到您的父元素(在本例中为:id_div_1)，以便您的子元素(在本例中为:remove_link)具有类属性 position: absolute 工作。然后，您只需定义您希望 child 所在的位置即可。顶部:4px；右 5px;

附带说明一下，请谨慎使用 !important，因为它会覆盖几乎所有内容，而且往往会变得困惑。