0

I don't understand why "display: none" isn't working properly to make things gone, when i hover the button i want the code that was gone to show, also i wanted it all center independent of the hover being activated or not. What am I missing? I want the image on both sides of the button when hovered and the images not being there when mouse is elsewhere.

.imgDownload {
    display: none;
}
    
#btnDownload:hover + .imgDownload {
    display: block;
}
<div class="pt-4" style="text-align: center;" id="btnResume">
  <span class="fa fa-arrow-circle-down imgDownload" style="font-size: 26px;"></span>
  <button type="button" style="font-size: 20px;" id="btnDownload">Download File</button>
  <span class="fa fa-arrow-circle-down imgDownload" style="font-size: 26px;"></span>
</div>


<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
aloisdg
  • 16,342
  • 4
  • 73
  • 80
MestreALMO
  • 27
  • 1
  • 6
  • Can you explain in brief about you requirement on hover?? You have download icon at both sides and download button at center.. What is your expectation on this when you hover?? – Maniraj Murugan Mar 05 '20 at 13:49
  • my expectation is the image to show on both sides when hoved and the images not being there when the mouse is elsewhere – MestreALMO Mar 05 '20 at 13:53
  • your CSS should be after the one of fontawsome – Temani Afif Mar 05 '20 at 13:56
  • 1
    (1) first duplicate deals with specificity issue so you understand why you CSS isn't working (2) second duplicate deals with the fact that you cannot target a previous element, your code you will work only for the right arrow – Temani Afif Mar 05 '20 at 14:00
  • Well a solution without the spans using before and after `button:hover:before, button:hover:after { font-family: FontAwesome; content: "\f0ab"; display: inline-block; padding-left: 5px; padding-right: 5px; vertical-align: middle; }` Can't post an answer since it was closed. – epascarello Mar 05 '20 at 14:09

0 Answers0