Home/ Questions/Q 7617873
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:15:19+00:00

I am working with some CSS for a small menu idea I have. I

  • 0

I am working with some CSS for a small menu idea I have.

I am hoping that when ready, I can hover over the link ‘Test 1’ and the Test 1 content displays in the #content div. And if you hover over ‘Test 2’ link then Test 2 content appears.

I was also hoping if it’s possible that when I move the cursor over to the #content div (from a link) that it will maintain the content in that area for that link.

Is this possible?

Many thanks for any helpers with this.

Here is my basic HTML:
http://jsfiddle.net/PjHnM/1/

UPDATE

I have an example I found here:
http://jsfiddle.net/88nKd/
but I’m still unsure how to maintain state when I hover into the content part.

<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<title>Divs</title>
<style type="text/css">
* {margin:0;padding:0}
#main {height:100px;width:400px;float:left;background:#eee;}
#main ul {height:100px;float:left;background:#999}
#main ul li a {width:100px;display:block;background:#333;color:#fff}
#main ul li a:hover {background:#777}
#content {height:100px;}
#content div {float:left}
</style>
</head>
<body>

<div id="main">
    <ul>
        <li><a href="">Test 1</a></li>
        <li><a href="">Test 2</a></li>
    </ul>
    <div id="content">
        <div style="display:none">Test 1 Content</div>
        <div style="display:none">Test 2 Content</div>
    </div>
</div>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html>
<html><head><meta charset="utf-8" />
<title>Divs</title>
<style type="text/css">
* {margin:0;padding:0}
#main {height:100px;width:400px;float:left;background:#eee;}
#main ul {height:100px;float:left;background:#999}
#main ul li a {width:100px;display:block;background:#333;color:#fff}
#main ul li a:hover {background:#777}
#content {height:100px;}
#content div {height:100px;}
</style>
 <script type="text/javascript" src="jquery.js"></script>
<script>
$(function(){
$("#test1").mouseenter(function(){$("#content1").show();}).mouseleave(function(){$("#content1").hide();});
$("#test2").mouseenter(function(){$("#content2").show();}).mouseleave(function(){$("#content2").hide();});

$("#content1").mouseenter(function(){$("#content1").show();}).mouseleave(function(){$("#content1").hide();});
$("#content2").mouseenter(function(){$("#content2").show();}).mouseleave(function(){$("#content2").hide();});
});
</script>
</head>
<body>

<div id="main">
    <ul>
        <li><a href="javascript:void;" id="test1">Test 1</a></li>
        <li><a href="javascript:void;" id="test2">Test 2</a></li>
    </ul>
    <div id="content">
        <div style="display:none" id="content1">Test 1 Content</div>
        <div style="display:none" id="content2">Test 2 Content</div>
    </div>
</div>

</body>

</html>

    ** UPDATED **
    Is this what did you mean?

    • 0