Hover-Text, der den Text nach unten drückt und die Liste überschreibt

Question

Ich verwende CSS, um einen Hover-over-Text-Absatz für eine Liste von Elementen zu erstellen. Wenn ich über den ersten schwebe, wird der Rest über den Bildschirm geschoben und überschreibt sich gegenseitig. Ich bin ein CSS/HTML-Anfänger so meine Entschuldigung, wenn ich eine dumme Frage bin zu fragen. [

#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

Sind Sie wie dies tun wollen? :

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