Question

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

＆＃13;

views

＆＃13;

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

＆＃13;

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

悬停文本按下文本并覆盖列表

1 个答案: