Click here to Skip to main content
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 Maciej Los 245
1 OriginalGriff 210
2 Manfred R. Bihy 190
3 CHill60 180
4 _Amy 155
0 OriginalGriff 7,445
1 Sergey Alexandrovich Kryukov 6,157
2 Maciej Los 3,774
3 Peter Leow 3,448
4 CHill60 2,702


Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 12 Mar 2012
Copyright © CodeProject, 1999-2014
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