Путаница о ~ селекторе,

Question

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

Что у меня есть это: http://codepen.io/Peechiee/full/vEZmMY/

Если вы идете в раздел био, я пытаюсь сделать так, чтобы, когда я парить над GIF, оно будет отображаться элемент внизу. Проблема в том, как бы я ни старался установить набор правил, это не работает для меня. Я не могу представить, почему это происходит, так как я не знаю, как использовать этот селектор.

Что я для этого раздела заключается в следующем:

.bio1 { 
    height:50%; 
    width:50%; 
    position:absolute; 
    background-color:transparent; 
    color:#FFFFFF; 
    z-index:71; 
    top:7%; 
    left:0%; 
    overflow:hidden; 
} 


.bio2 { 
    height:50%; 
    width:50%; 
    left:0%; 
    top:7%; 
    background-color:GREY; 
    color:#FFFFFF; 
    font-family:MS Gothic; 
    font-size:8pt; 
    z-index:70; 
    position:absolute; 
} 

.bio1:hover ~ .bio2 { } 

Я не размещал никаких заявлений для этих последних набора правил, потому что в полной честности я даже не уверен, что это делает. Мне просто интересно, может ли кто-нибудь исправить это для меня и, может быть, объяснить мне, как это работает, чтобы я мог использовать его в будущем? Кстати, для сайта, на котором я использую это, мне не разрешено использовать Java, поэтому, пожалуйста, избегайте этого. Заранее спасибо. : D

Answer 1

2 основные проблемы:

• вы установили очень небольшой font-size на .bio2, так что вам нужно, чтобы увеличить его, если вы хотите увидеть что-то
• Z-индекс отсутствует на .bio2 элемента

Итак, когда вы наводите .bio1, вы можете просто установить z-индекс на .bio2. С .bio1 было z-index: 71, вам необходимо подобрать большее значение.

.bio1:hover ~ .bio2 { 
    z-index : 72; 
} 

Вилка: [? Что делать CSS ~ (закорючка/тильда/вертеть) селектор] http://codepen.io/anon/pen/KwqOPr