[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 374
  • Last Modified:

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 */
      


0
heng03
Asked:
heng03
  • 2
1 Solution
 
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

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now