[Webinar] Learn how to a build a cloud-first strategyRegister Now


change content when mouse over the item

Posted on 2008-11-18
Medium Priority
Last Modified: 2012-05-05
Hi, experts:
I look this web site [http://www.cavatinaduo.com/]. I know that it embeds a Flash file.
I would like to implement the menu. When mouse over 'Review', the content below the menu will change. How could I do that by pure CSS or CSS + Javascript? Could you tell me ? Thank you.
Question by:TKD
LVL 13

Expert Comment

ID: 22991908
I personally use QuickMenu from Opencube (http://www.opencube.com/index.asp), it's one of the best available and can create both CSS and CSS + Javascript menus.
LVL 13

Accepted Solution

Onthrax earned 90 total points
ID: 22993049
This would be fairly easy to create yourself.
All it takes is a DIV and some javascript.

For example (from the head so not tested!)

   function ChangeDesc(item) {
     if (item == 1) {
        document.getElementById("ShortDesc").innerHTML = "New description here";

    <span id='menuItem1'><a onclick='ChangeDesc(1)'>review</a></span>
    <span id='menuItem2'><a onclick='ChangeDesc(2)'>news</a></span>

<div id='ShortDesc'>large block below the menu</div>

Not perfect, but should give you a good idea on how to accomplish what you want..


Author Closing Comment

ID: 31518125
Thank you.

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question