悬停文本向下推送文本并覆盖列表

Question

我正在使用CSS为项目列表创建悬停在文本段落上。当我将鼠标悬停在第一个上时，其余部分被推到屏幕上，相互覆盖。我是CSS/HTML新手，所以如果我问一个愚蠢的问题，我深表歉意。[

#DivForHoverItem {
	height: 20px;
	width: auto;
}
#HiddenText {
	display: none;
}
#DivForHoverItem:hover #HiddenText {
	display: block;
	background-color: #D3D3D5;
	opacity: 1.0
	top: -23px;
	bottom: auto;
	left: 0;
	right: 0;
	padding: 15px;
	position:relative;
	float:left;
	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 {    	
      float:left;
      clear:both;
}
#HiddenText {
        float:left;
	display: none;
}
#DivForHoverItem:hover #HiddenText {
	display: block;
	background-color: #D3D3D5;
	opacity: 1.0;
	position:relative;
        padding-left:15px;
	float:left;
	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>