Как показать скрытые элементы div при наведении курсора на разные части абзаца без использования JS? ⇐ CSS

[Anonymous]

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

• Когда я удаляю второй элемент span и p-элемент,
  эффект наведения работает, но мне нужно и то, и другое, чтобы я мог стилизовать текст.
• Я также попробовал установить непрозрачность на 0 для элемента span и на 1 для наведения (вместо использования отображения), но то же самое возникает проблема. Это работает только тогда, когда я удаляю p-элемент и второй элемент span.

Конечно, я делаю что-то не так, но не могу в этом разобраться сам.
Я ищу решения, которые желательно не использовать JS.
У меня есть следующий HTML-код:


Lorem ipsum dolor sit amet, consectetur adipiscing elit.







Hidden Text 1>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales.








Hidden Text 2


Duis tellus ligula, volutpat et cursus in, euismod in magna.







С помощью следующего кода CSS:
body {
background-color: #eee;
}
.div1 {
height: 30px;
padding: 50px 0 60px 0;
margin: auto;
position: relative;
text-align: center;
}
.show {
padding: 0 0 15px 0;
margin: 0;
}
.hide1 {
display:none;
opacity:0;
background-color: #eee;
border: 1px #666 solid;
}
.hide2 {
display: none;
opacity:1;
background-color: #eee;
border: 1px #666 solid;
}
.txt1, .txt2 {
font-weight: bold;
color:#bc2f00;
}
.txt1:hover + .hide1 {
opacity: 1;
display: block !important;
}
.txt2:hover + .hide2 {
opacity: 1;
display: block !important;
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... aph-withou