Question

我希望每当我将鼠标悬停在图像上时，它都会显示两个图标 - 即删除＆amp;相机图标。但目前我只能看到一个删除图标。

为此，我使用了CSS，如下所示

＆＃13;

#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;
}

＆＃13;

<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;" />

＆＃13;

Answer 1

您在选择器组中缺少一个选择器。当您i元素id='nav-remove-icon'时，以下选择器只会选择:hover代码id='cover-img'。

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

它不会同时选择这两个图标。您还必须包含以下选择器才能显示两个图标。

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

另一件值得注意的事情是两个图标位于偏离图像的位置，因此选择器 - #nav-upload-icon:hover和#nav-remove-icon_hover将永远不会被触发，因为这些图标仅在图像徘徊。一旦我们将鼠标移离图像（将鼠标悬停在图标上），它们就会变得不可见。因此，虽然此解决方案适用于您的情况，但也值得查看Jurion's suggestion in comments。

<强>演示：

#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;"/>

Hover一次不能用于两个元素

1 个答案: