onMouseOver change CSS style

Hi

I have below code.
Which is a tree structure node list.

<body>
<ul CLASS="mktree" id="nav">
  <li>
    <a href="#">Menu Tab 1</a>
    <ul>
      <li><a href="show-doc.html">Sub Menu 1</a></li>
      <li>
      <a href="#">Sub Menu 2</a>
      <ul>
        <li><a href="show-doc.html">Sub Menu 2a</a></li>
        <li><a href="#">Sub Menu 2b</a></li>
      </ul>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Tab 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Tab 3</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Tab 4</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

I want to have my CSS change the style.color when mouse is over the UL list.
How to get it done ?
Also, want to change the CSS  style.color when click on the UL list.

below is my sample CSS.

ul.mktree  li { list-style: none;
  width: 110px;
  background-color: #fe6;
}
      /* Control how "spaced out" the tree is */
      
ul.mktree, ul.mktree ul , ul.mktree li { margin-left:10px; }
 /* Provide space for our own "bullet" inside the LI */
      
ul.mktree  li           .bullet { padding-left: 15px; }
      /* Show "bullets" in the links, depending on the class of the LI that the link's in */
      


heng03Asked:
Who is Participating?
 
sigmaconCommented:
First, why are you not just using the appropriate css selectors to make your tags respond to the mouse events. More then that is usually not necessary.

Do you mean something like this (a very simple solution - if you need something more sophisticated, let me know). With this piece of code, you'll need to add a call to the methods that change the colors to each list element, which can be cumbersome.

<html>
<head>
<style>
ul.mktree  li { list-style: none; width: 110px; background-color: #fe6; }
ul.mktree, ul.mktree ul , ul.mktree li { margin-left:10px; }
ul.mktree  li           .bullet { padding-left: 15px; }
</style>
</head>
<body>

<ul CLASS="mktree" id="nav">
  <li>
    <a href="#" onMouseOver="sc(this);" onMouseOut="uc(this);" onMouseDown="cc(this);">Menu Tab 1</a>
    <ul>
      <li><a href="show-doc.html" onMouseOver="sc(this);" onMouseOut="uc(this);" onMouseDown="cc(this);">Sub Menu 1</a></li>
    </ul>
  </li>
</ul>

<script language="JavaScript">

function setElementColor(el, color) {
      if (el && el.style) {
            el.style.color = color;
      }
}
function sc(el) { setElementColor(el, '#ff0000'); }
function uc(el) { setElementColor(el, '#0000ff'); }
function cc(el) { setElementColor(el, '#00ff00'); }

</script>

</body>
</html>

0
 
heng03Author Commented:
Hi

Thanks.

One more question.

I have below code.

      <li><a href="javascript:window.open('show-doc.html')">Sub Menu 1</a></li>

It able to open a new window.
However, the main (original) page show content as ==> [object]. Why ?
I want the main window/page still show the current content instead of [object].

Help.

Thanks
Heng03



0
 
heng03Author Commented:
Hi

I got the answer already.
Use onClick=....

use <a href="#" onclick="javascript:window.open(.....)">Sub Menu 1</a>

Thanks & Rgds
Heng03

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.