Display DIV using CSS3

Question

5.00/5 (1 vote)

See more:

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

dhage.prashant01

Updated 12-Mar-12 2:05am

v2

Add a Solution

1 solution

Add a Solution

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

Graham Breach · Answer 1 · 2012-03-12T03:24:00

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.

Posted 12-Mar-12 3:24am

Graham Breach

Comments

dhage.prashant01 12-Mar-12 11:49am

ok so how can i display .loginHolder when mouse hover on .caption
Any idea??

Graham Breach 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.

Display DIV using CSS3

1 solution

Solution 1

Add your solution here

Preview 0

Display DIV using CSS3

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us