Solved

onMouseOver change CSS style

Posted on 2004-10-21
361 Views
Last Modified: 2013-11-19
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
Question by:heng03
    3 Comments
     
    LVL 8

    Accepted Solution

    by:
    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
     

    Author Comment

    by:heng03
    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
     

    Author Comment

    by:heng03
    Hi

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

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

    Thanks & Rgds
    Heng03

    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Foundations of Front-End Development

    Jump-start a lucrative career in front-end web development, with zero previous coding experience required. This course covers the basic programming concepts and languages required for creating engaging websites from scratch.

    This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    933 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

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now