Member Avatar for JRM

Hello all,

I got involved with a Joomla CSS project, but I know very little about the properties of CSS.
I have found out the hard way, that it works by it's own rules which may or may not necessarily be a subset of the HTML tag that I am trying to modify.

I can't seem to get onMouseover to work at all. What the tags accept and what CSS accepts appear to be different. I can only get the background color to change when used in conjunction with an anchor tag.
The desired effect is to light up list items in an unordered list by changing the background color and text color of the selection . CSS is not coopperating...

Any Ideas on how to accomplish the effect? Is there a good reference for CSS anywhere?

  • 4 Contributors
  • 6 Replies
  • 189 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for peter_budo

onMouseover is JavaScript action. Do you want to move this post to JavaScript section?

Member Avatar for JRM

onMouseover is JavaScript action. Do you want to move this post to JavaScript section?

My question was why can I call this function with a tag but not with CSS? i THOUGHT that CSS was supposed to be a "one stop shopping" way to manipulate the look and feel of HTML tag functions.

If it works in the the tag, shouldn't it work in the CSS?

If you think it's better in the Javascript section, OK...you're the moderator...

Member Avatar for ~s.o.s~

You need to take a look at CSS pseudo classes. BTW, this question belongs to the CSS section if this task needs to be achieved only using CSS.

Member Avatar for peter_budo

Sorry I move it here because I thought this is only possible with JavaScript:(

Member Avatar for JRM

You need to take a look at CSS pseudo classes. BTW, this question belongs to the CSS section if this task needs to be achieved only using CSS.

Thanks SOS!
Your link answered another question I had about "hover" as as well . I thought that it could be defined somewhere, but I could not figure out how. I was trying to use another function name with the color definitions inside it. The code coloring indicated that it was wrong...

The thing with Jomila is that is has MANY CSS files with specific preferred functions. When I modified the blue.css, the active color,i got the desired result, but I didn't necessarily want it to be "global". So far I know that there are at least 3 CSS files used at a time. This makes me CRAZY.

How do I define or use different versions of hover within a site? Can they be temporarily overridden?
here is the solution that worked GLOBALLY in blue.css (The comented part is the orginal entry.)

a:hover {
        /*color: #0b3768;*/
        color:#FFFFFF;
        background:#FF4500;
}
Member Avatar for essential

I will use the document.getElementById method to change the CSS classname property of this ol tag.
Code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Javascript class switcher</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--

* { margin: 0; padding: 0; }

/* BACKGROUND CHANGER */
.o_l { margin-bottom: 1.5em; background-color: red; color: black ;  }

/* DEFAULT VALUE */
.restore { margin-bottom: 1.5em; background-color: black; color: white;  }

-->
</style>
<script type="text/javascript">
<!-- BEGIN HIDING

function change_bg_txt(classes)
{ class = document.getElementById(classes);

class = ( class.className == 'restore' ) ? class.className = 'o_l' : class.className = 'restore';

}
// DONE HIDING -->
</script>
</head> 
<body>
<div>
<ol id="ol1"  class="restore">
<li id="li1" onMouseOver="change_bg_txt('ol1');">list 1</li>
<li id="li2" onMouseOver="change_bg_txt('ol1');">list 2</li>

</ol>
</div>
</body>
</html>

Hope it helps you... Enjoy coding!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.