CODEWITHSUNDEEP
csscss-selectors
Rajesh Choudhary
Rajesh Choudhary

Reputation: 219

Hover is not working for two elements at a time

I want that whenever I hover on an image, it should show two icons - that is delete & camera icons. But currently I am able to see only one icon that is of delete.

For this I have used CSS as given below

#cover-img:hover + #nav-upload-icon + #nav-remove-icon,
#nav-upload-icon:hover,
#nav-remove-icon:hover {
  visibility: visible;
}
#nav-upload-icon,
#nav-remove-icon {
  visibility: hidden;
}
.fa-camera:before {
  content: "\f030";
  margin-right: -12px;
  margin-top: -88px;
  position: absolute;
  /* top: 10px; */
  /* left: 10px; */
  z-index: 1000;
  cursor: pointer;
  /* opacity: 0; */
}
.fa-remove:before {
  content: "\f00d";
  margin-top: 8px;
  margin-right: -24px;
  margin-right: 16px;
  margin-top: -35px;
  position: absolute;
  color: #FF0000;
  z-index: 1000;
  cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<img src="http://lorempixel.com/100/100/nature/1" class="profile-pic" id="cover-img" onerror="this.src='images/user-icon.png'" /> <i id="nav-upload-icon" class="fa fa-camera"></i><i id="nav-remove-icon" class="fa fa-remove"></i>	
<input id="ip" type='file' style="display:none;" />
<input id="ip1" type='file' accept="image/*;capture=camera" style="display:none;" />

Upvotes: 1

Views: 132

Answers (1)

Harry
Harry

Reputation: 89750

You are missing one selector in your selector group. The below selector would select only the i tag with id='nav-remove-icon' when you :hover on the element with id='cover-img'.

#cover-img:hover + #nav-upload-icon + #nav-remove-icon

It would not select both the icons. You would have to include the below selector also to get both icons to display.

#cover-img:hover + #nav-upload-icon

Another thing that might be worth noting is that the two icons are positioned at an offset from the image and so the selectors - #nav-upload-icon:hover and #nav-remove-icon_hover will never be triggered because those icons become visible only when image is hovered on. As soon as we move the mouse away from the image (to hover on the icons itself), they become invisible. So, while this solution would work for your case, it might also be worth having a look at Jurion's suggestion in comments.

Demo:

#cover-img:hover + #nav-upload-icon + #nav-remove-icon,
#cover-img:hover + #nav-upload-icon,
#nav-upload-icon:hover,
#nav-remove-icon:hover {
  visibility: visible;
}
#nav-upload-icon,
#nav-remove-icon {
  visibility: hidden;
}
.fa-camera:before {
  content: "\f030";
  margin-right: -12px;
  margin-top: -88px;
  position: absolute;
  z-index: 1000;
  cursor: pointer;
}
.fa-remove:before {
  content: "\f00d";
  margin-top: 8px;
  margin-right: -24px;
  margin-top: -35px;
  position: absolute;
  color: #FF0000;
  z-index: 1000;
  cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<img src="http://lorempixel.com/100/100/nature/1" class="profile-pic" id="cover-img" onerror="this.src='images/user-icon.png'" /> <i id="nav-upload-icon" class="fa fa-camera"></i><i id="nav-remove-icon" class="fa fa-remove"></i>  
<input id="ip" type='file' style="display:none;" />
<input id="ip1" type='file' accept="image/*;capture=camera" style="display:none;"/>

Upvotes: 2

Related Questions