[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

onMouseOver change CSS style

Posted on 2004-10-21
3
Medium Priority
?
365 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
Comment
Question by:heng03
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
sigmacon earned 400 total points
ID: 12378589
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
ID: 12378642
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
ID: 12378749
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

656 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