Another div on div hover

Hi. See code.
HTML:


<body>
	<div id="A">1</div>
	<div id="A_hidden">dgdfgdfgdfgsd</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>11</div>
	<div>12</div>
	<div>13</div>
	<div>14</div>
	<div>15</div>
	<div>16</div>
</body>

CSS:


html,body {
	background:#000;
	color:#fff;
	height:100%;
	margin:0;
}

div {
	width:25%;
	height:25%;
	float:left;
	text-align:center;
}

#A_hidden {
	display: none;
}

#A:hover {
 display: none
}

#A:hover ~ #A_hidden
 {
	display:block;
	background:red;
}

Why div blinks? How can I simplify the code? And to make it cross-browser, but using only HTML&CSS. Big thx in advance!

You are really confusing the browser there. When you hover over #A, #A_hidden appears, but #A immediately disappears, and so #A_hidden disappears because you aren’t hovering over #A any more … meaning that #A reappears … and you are in a loop.

So the question is, what are you really trying to achieve? Because what you’ve written doesn’t make sense.

Were you looking for something like this?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

html,body {
	background:#000;
	color:#fff;
	height:100%;
	margin:0;
}

div {
	width:25%;
	height:25%;
	float:left;
	text-align:center;
}

#A_hidden {
	display: none;
}

#A:hover #A_hidden {
    display: block; 
	background:red;
	position: absolute; 
	top: 0; 
	left: 0;
}

</style>
</head>
<body>
    <div id="A">1
        <div id="A_hidden">dgdfgdfgdfgsd</div>
    </div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>11</div>
	<div>12</div>
	<div>13</div>
	<div>14</div>
	<div>15</div>
	<div>16</div>
		
</body>
</html>

Big thx. I understood my mistake. But if I want to leave a background color (for example black), the content of div#A will still be visible. What to do? How can I hide it? As in this case can vertical center the content of hidden div?

You could just hide it with a black background on the hovered div. However if you want to actually hide the content and not touch the background you would need to put that content into another element and then hide it.

e.g.


#A:hover p.hide-me{display:none}


<div id="A">
		<p class="hide-me">1</p>
		<div id="A_hidden">
                 etc....

As in this case can vertical center the content of hidden div?

If the content is variable height then display:table-cell (IE8+) is the easiest to use although you will need some extra elements to cary the styles.

e.g.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body {
	background:#000;
	color:#fff;
	height:100%;
	margin:0;
}
div {
	width:25%;
	height:25%;
	float:left;
	text-align:center;
	position:relative;
}
#A_hidden {
	display:none;
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}
#A:hover #A_hidden { display: block; }
#A:hover p.hide-me { display:none }
#A_hidden div {
	display:table;
	width:100%;
	height:100%;
}
#A_hidden div p {
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
	text-align:center;
	margin:0;
}
</style>
</head>
<body>
<div id="A">
		<p class="hide-me">1</p>
		<div id="A_hidden">
				<div>
						<p>dgdfgdf gdfgsd<br>
								test</p>
				</div>
		</div>
</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</body>
</html>

Although it may be better if you explain your goals a little as quite often code we offer does depend on what happens next?

See my site. I want to hover in the corresponding block appeared hidden content for it (using only HTML&CSS).The table-cell fit?

You mean something like this?

  • Test: [U]hover-hidden.htm[/U]
  • The content of the table-cells is split in 2 parts, which can be alternatively displayed or blocked at a hover.

Depending on your further content, maybe there have to be made some adaptations for a responsive layout (as the cells shrink at small devices).

The code I gave you would do that :slight_smile:

See Franky’s example above if you need to support older browsers (IE7-) otherwise I would do it like this for IE8+ without using a table as this is not tabular data and an html table is not really appropriate.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body {
	background:#000;
	color:#fff;
	height:100%;
	margin:0;
}
ul.blocks {
	margin:0;
	padding:0;
	list-style:none;
	height:100%;
}
ul.blocks li {
	width:25%;
	height:25%;
	float:left;
	display:table;
}
ul.blocks li b, ul.blocks li span {
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
	text-align:center;
	font-size:1.2em;
}
ul.blocks li b { font-size:100px }
ul.blocks li span { display:none; }
ul.blocks li:hover b { display:none }
ul.blocks li:hover span { display:table-cell }
</style>
</head>
<body>
<ul class="blocks">
		<li><b>A</b><span>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet ..</span></li>
		<li><b>L</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>E</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>X</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>A</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>N</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>D</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>E</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>R</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>S</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>O</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>R</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>O</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>K</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>I</b><span>Lorem ipsum dolor sit amet..</span></li>
		<li><b>N</b><span>Lorem ipsum dolor sit amet..</span></li>
</ul>
</body>
</html>


However if you need to support IE7 and under then a table would be the easiest solution rather than adding a number of hacks. :slight_smile:

Or you could just take this in a whole different direction, if you dont mind employing a bit more CSS trickery.


<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
		body, html, .contents {padding: 0; margin: 0; height: 100%; background: #000}
.letter{ float:left;    height: 25%; width: 25%;   line-height: 1 ;  overflow: hidden}
.letter p{ display:inline-block; width: 1px;  vertical-align: middle;  height:100%; padding:0; margin:0;}

.letter:before {content:"A"; color:#fff; display: inline-block; width: 100%; margin-right:-.06em;  text-align: center; vertical-align: middle; font-weight:bold; font-size:  600%; ;  }


.A:before {content:"A"; }
.L:before {content:"L"; }
.E:before {content:"E"; }
.X:before {content:"X"; }
.N:before {content:"N"; }
.D:before {content:"D"; }
.R:before {content:"R"; }
.S:before {content:"S"; }
.O:before {content:"O"; }
.K:before {content:"K"; }
.I:before {content:"I"; }
 

.letter:hover:before{ content:none;}
.letter:hover{background: #fff}
.letter:hover p{  height: auto; width: 100%;  }
   h1 {position: absolute; left: -999999em;}
		</style>
	</head>
	<body>
	<h1>Alex ...</h1>
   <div class='contents'>
	   	<div class="letter A">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter L">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter E">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter X">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter A">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter N">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter D">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter E">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter R">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter S">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter O">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter R">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter O">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter K">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter I">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
	   	<div class="letter N">
	   	    <p>paragraph 1 of 16, or this could be a div  with multiple paragraph. you get the idea</p> 
	   </div>
   </div>


</div>

	</body>
</html>

This is probably a bit more versatile anyway. Hope that helps

Big thx for the this work! It great example. But I want to have to go to the DIV’s layout :wink: While studying and going to try to make the grid for responsive.
Paul O’B, big thx for help! It’s great. This code is really short and easy.
dresden_phoenix, I know the “before” is not supported by older browsers? Thanks for the code. What it better?

:before/:after is supported by everything except IE7 and below. However if that is a major concer you can add this (best to do it on a conditional style sheet)

.letter{

	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);
}

The basic reason why I pursued an alternate solution is structure and semantics. In my way you have a headline and some paragraphs and no random scattered “letters”. It will also allows for greater flexibility in case you need alternate layouts.

The semantics are not important cause it’s intro page of the site, but big thx.