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

Question

我有一个 div，当我将鼠标悬停在该 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;
}

您需要使用相对位置和绝对位置，而不是尝试左右浮动内容。首先，您需要向父元素(在本例中:id_div_1)添加一个具有属性 position:relative 的类，以便为您的子元素(在本例中:remove_link)添加类属性 position:absolute工作。然后你只需定义你希望你的 child 所处的位置即可。顶部:4px；右5px；

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