Member Avatar for tqmd1

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

xx.JPG 15.67 KB
  • 4 Contributors
  • 5 Replies
  • 136 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tqmd1
Member Avatar for Dandello

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

Member Avatar for Scu

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.

Member Avatar for tqmd1

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

Member Avatar for judryn27 
<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 because: n/a
Member Avatar for tqmd1

Sir,

If I am not wrong then where are following classes?

feature
show-feature

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.