Click here to Skip to main content
11,645,087 members (69,717 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS3
hello friends,
please have a look on below code

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<div class="mainHolder">
	<div class="loginHolder ">
		<ul>
			<li>Name:</li>
			<li><input type="text" /></li>
			<li>Pwd:</li>
              <li><input type="text" /></li>					 
		</ul>			 
	</div>
	<div class="caption">
		<h5>Login</h5>
	</div>
</div>
</body>

I'm not able to do CSS3 display div.loginHolder when I hover on div.caption
I have tried following CSS
<style type="text/css">
      .caption:hover + .loginHolder
		   {
			  display:block;
		   }
</style>

Any idea where I'm going wrong

Thanks in advance
Posted 12-Mar-12 1:52am
Edited 12-Mar-12 2:05am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Well, the specification says that a selector of "a + b" means "a" immediately followed by "b". (Specification here[^])

In your source, your .loginHolder div is before the .caption div, so they are the wrong way around for the selector to work.
  Permalink  
Comments
dhage.prashant01 at 12-Mar-12 11:49am
   
ok so how can i display .loginHolder when mouse hover on .caption
Any idea??
Graham Breach at 12-Mar-12 11:54am
   
If you swapped the order of your divs, then the login div would appear when you hover over the caption. But it would only appear when the mouse was over the caption, not when you try to move the mouse over the login div.

If you put the login div inside the caption div, then change the CSS selector to .caption:hover .loginHolder without the "+", it should work.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 700
1 jyo.net 494
2 Sergey Alexandrovich Kryukov 439
3 Afzaal Ahmad Zeeshan 404
4 CPallini 386
0 OriginalGriff 1,065
1 Sergey Alexandrovich Kryukov 683
2 DamithSL 681
3 Afzaal Ahmad Zeeshan 662
4 CPallini 555


Advertise | Privacy | Mobile
Web02 | 2.8.150731.1 | Last Updated 12 Mar 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100