Наведение не работает для двух элементов одновременно

Question

Я хочу, чтобы всякий раз, когда я наводил изображение, он должен показывать две значки - это удалить значки камеры &. Но в настоящее время я могу видеть только один значок, который удаляется.

Для этого я использовал CSS, как указано ниже

#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> \t 
 
<input id="ip" type='file' style="display:none;" /> 
 
<input id="ip1" type='file' accept="image/*;capture=camera" style="display:none;" />

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