Наведите текст, нажимая текст вниз и переписывая список

Question

Я использую CSS для создания наведения текста над текстом для списка элементов. Когда я нависаю над первым, остальные нажимаются на экран, переписывая друг друга. Я CSS/HTML начинающий поэтому мои извинения, если я задаю глупый вопрос. [

#DivForHoverItem { 
 
\t height: 20px; 
 
\t width: auto; 
 
} 
 

 
#HiddenText { 
 
\t display: none; 
 
} 
 

 
#DivForHoverItem:hover #HiddenText { 
 
\t display: block; 
 
\t background-color: #D3D3D5; 
 
\t opacity: 1.0 
 
\t top: -23px; 
 
\t bottom: auto; 
 
\t left: 0; 
 
\t right: 0; 
 
\t padding: 15px; 
 
\t position:relative; 
 
\t float:left; 
 
\t background-attachment:local; 
 
}

<div id="DivForHoverItem"><p>Topic 1: Questions, puzzlement and what is okay</p> 
 
<div id="HiddenText"><p>We begin to engage students in the ways of thinking and the pedagogical (or teaching) approach that underlie the Primary Ethics curriculum, as well as to build understanding about the behaviour expected in ethics classes.</p></div></div> 
 

 
<div id="DivForHoverItem"><p>Topic 2: Secrets and a big, important question</p> 
 
<div id="HiddenText"><p>We aim to foster students' developing capacity to make logical inferences and encourage and support students to think for themselves about the ethical question of whether or not it is okay to tell a friend's secret.</p></div></div> 
 

 
<div id="DivForHoverItem"><p>Topic 3: Doing harm without meaning to</p> 
 
<div id="HiddenText"><p>We encourage students to think for themselves about the difference between 'meaning' or intending to cause harm and causing harm 'accidentally' or without wanting to.</p></div></div>

] 1

Answer 1

Вы хотите сделать, как это? :

#DivForHoverItem {  \t 
 
     float:left; 
 
     clear:both; 
 
} 
 

 
#HiddenText { 
 
     float:left; 
 
\t display: none; 
 
} 
 

 
#DivForHoverItem:hover #HiddenText { 
 
\t display: block; 
 
\t background-color: #D3D3D5; 
 
\t opacity: 1.0; 
 
\t position:relative; 
 
     padding-left:15px; 
 
\t float:left; 
 
\t background-attachment:local; 
 
}

<div id="DivForHoverItem"><p>Topic 1: Questions, puzzlement and what is okay</p> 
 
<div id="HiddenText"><p>We begin to engage students in the ways of thinking and the pedagogical (or teaching) approach that underlie the Primary Ethics curriculum, as well as to build understanding about the behaviour expected in ethics classes.</p></div></div> 
 

 
<div id="DivForHoverItem"><p>Topic 2: Secrets and a big, important question</p> 
 
<div id="HiddenText"><p>We aim to foster students' developing capacity to make logical inferences and encourage and support students to think for themselves about the ethical question of whether or not it is okay to tell a friend's secret.</p></div></div> 
 

 
<div id="DivForHoverItem"><p>Topic 3: Doing harm without meaning to</p> 
 
<div id="HiddenText"><p>We encourage students to think for themselves about the difference between 'meaning' or intending to cause harm and causing harm 'accidentally' or without wanting to.</p></div></div>