0

Dear Experts

I have following codes

<html>
<style type="text/css">


#menu 	{
	position:absolute;
	height:300px;width:200px;
	margin-left:60px;margin-top:50px;
	background:rgb(0%,100%,80%);
	font-family:arial; font-size:30pt;font-weight:18px;
	text-align:center;padding:20px;padding:10px;
	}

#menu ul	{margin:1px;}
#menu ul li	{display:block;width:140px;background:orange;
	font-family:arial; font-size:18pt;text-align:center;padding:1px;margin:1px;height:20px;text-decoration:none}

#menu ul li a:link	{width:140px;background:rgb(0%,80%,40%);
	font-family:arial; font-size:18pt;text-align:center;padding:1px;margin:1px;height:20px;}

#menu ul li a:hover	{background:#e3eeff;text-decoration:underline;padding:1px;margin:1px;height:20px;}


#div1 	{
	position:absolute;
	height:300px;width:200px;
	margin-left:280px;margin-top:50px;
	background:rgb(0%,80%,40%);
	font-family:arial; font-size:30pt;font-weight:18px;
	text-align:center;padding:20px;
	}


#div2 	{
	position:absolute;
	height:300px;width:200px;
	margin-left:500px;margin-top:50px;
	background-color:pink;
	font-family:arial; font-size:30pt;font-weight:18px;text-align:center;padding:20px;
	}


</style>
<div id="menu">
<ul>
<li><a href="">Hide Div 2</a></li>
<li><a href="">Show Div 2</a></li>
</ul>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

</html>

My question is how to Show and Hide div with link as shown in attached file.


Please help

Attachments xx.JPG 15.67 KB
4
Contributors
5
Replies
6
Views
5 Years
Discussion Span
Last Post by tqmd1
0

You have to have some sort of selector mechanism linked to an onclick event - javascript or jQuery

0

I can't understand exacly what you mean, but you can hide a div using the display: none; or visibility: hidden;
The difference between the two is that visibility occupy the same space as if it were visibile without being visible while display: none makes the div dissaper as it were never a code.

Hope this helps your quest.

0

My question is clear. how to display or hide div with hover?

0
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage1.jpg" alt=""></div>
</div>
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage2.jpg" alt=""></div>
</div>
<div class="feature">
<a href="#">Link</a>
<div class="show-feature"><img src="myimage3.jpg" alt=""></div>
</div>

web design chennai

Edited by judryn27: n/a

0

Sir,

If I am not wrong then where are following classes?

feature
show-feature

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.