SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Another div on div hover

    Hi. See code.
    HTML:
    Code:
    <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:
    Code:
    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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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?

    Code:
    <!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>

  3. #3
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by oxoleito View Post
    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?
    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.

    Code:
    #A:hover p.hide-me{display:none}
    Code:
    <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.
    Code:
    <!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?

  5. #5
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See my site. I want to hover in the corresponding block appeared hidden content for it (using only HTML&CSS).The table-cell fit?

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    You mean something like this?
    • Test: hover-hidden.htm
    • 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).

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by oxoleito View Post
    See my site. I want to hover in the corresponding block appeared hidden content for it (using only HTML&CSS).The table-cell fit?
    The code I gave you would do that

    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.

    Code:
    <!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.

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Or you could just take this in a whole different direction, if you dont mind employing a bit more CSS trickery.

    Code:
    <!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

  9. #9
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    You mean something like this?
    • Test: hover-hidden.htm
    • 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).
    Big thx for the this work! It great example. But I want to have to go to the DIV's layout 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?

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    :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)

    Code:
    .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.

  11. #11
    SitePoint Member oxoleito's Avatar
    Join Date
    Sep 2013
    Location
    Moscow
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The semantics are not important cause it's intro page of the site, but big thx.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •