user3354539 user3354539 - 6 months ago 29
HTML Question

Display icon in div when hover on div using CSS

I have a div that when I hover over I want to display an icon in the upper right corner of the div with a border surrounding the div and icon and padding between the text and the icon.

Sounds pretty easy, but I am stumped. I can get the icon to display, but not in the upper right corner of the div. Also I cannot get the padding between the text and the icon.

Here is what I am seeking to achieve when I have not moused over (focused) the div:

enter image description here

Here is what I am trying to achieve when I have moused over (focused) the div:

enter image description here

Here is a jsfiddle of what I currently have.

Any suggestions would be great.

Here is my HTML code:

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


Here is my CSS code:

#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

I think this is what you are trying to achieve: 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;
}

Instead of trying to float content left and right, you need to use position relative and absolute. First you need to add a class with the property position: relative to your parent element (in this case: id_div_1) in order for your child element (in this case: remove_link) with the class property position: absolute to work. Then you just define the position where you want your child to be ie. top: 4px; right 5px;

On a side note, use !important very sparingly since it overrides almost everything and it tends to get messy.