Malik Kashmiri Malik Kashmiri - 1 month ago 9
CSS Question

how to do hover span property with angular 2

I want to do span hover like this

Major
span in the image below when we hover out it just look like
story
span . need some css implementation. to make a boarder around it as well as the edit icon as shown in fig

Need to implement



enter image description here

I tried so far



span:hover {
border : 2px solid;
border-color : darkgrey;
cursor: pointer;
}

<span> Active</span>




Answer

Sample code is below. You can get the basic idea from this.

I have used fontAwesome icons for demo purpose.

div{
  padding:5px 0px 5px 5px;
  display:inline-block;
}

.fa.fa-pencil{
  background-color:grey;
  display:none;
  padding:4px;
}

.fa.fa-angle-double-up{
  display:none;
}

div:hover .fa.fa-pencil{
  display:initial;
}

div:hover .fa.fa-angle-double-up{
  display:initial;
}

div:hover .fa.fa-bookmark{
  display:none;
}

div:hover{
  border : 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div>
 <i class="fa fa-bookmark"></i>
 <i class="fa fa-angle-double-up"></i>
  <span> Major </span>
  <i class="fa fa-pencil"></i>
</div>

Comments