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

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>