I need some help with css and hover Thread

aight, ive sorta got the hover thing down, as well as most of the basic css ideas, but heres my question:

ive seen sites that use the css to change the entire cell of a table on hover, but how do you do that?

i guess it would also be helpful if someone could tell me how to define the table properties of a class too

.test
a:hover {
cursor: hand;
background color: black;
color: white;
text-decoration: none;
border-color: black;
background-color: #000000;
}

is what i have so far... but all that does is a simple highlighting, i want to change the background of the cell, and the font color and weight on hover

- Edited By PsychoFarmer On Sat 27th, Sep 2003 @ 7:01:27pm

i can't help you

...

anyone who can help me?

its rather hard to find many good css tutorials...

You can do it multiple ways. The easiest way is to set up css classes for each variation.

.cellRegular {
background-color: #202020;
border-color: black;
border-style: solid;
border-width: 1px;
color: white;
text-decoration: none;
}
.cellHighlight {
background-color: #d0d0d0;
border-color: black;
border-style: solid;
border-width: 1px;
color: black;
cursor: hand;
text-decoration: underline;
}

Also, go ahead and set up a JavaScript function like so.

<script language="JavaScript">
function toggleCell( ob, highlighted ) {
 if ( highlighted ) {
  ob.className = "cellHighlight";
 } else {
  ob.className = "cellRegular";
 }
}
</script>

Finally, set up your html.

...
<tr>
<td class="cellRegular" onmouseover="toggleCell(this,true)" onmouseout="toggleCell(this,false)">1</td>
<td class="cellRegular" onmouseover="toggleCell(this,true)" onmouseout="toggleCell(this,false)">2</td>
<td class="cellRegular" onmouseover="toggleCell(this,true)" onmouseout="toggleCell(this,false)">3</td>
</tr>
<tr>
<td class="cellRegular" onmouseover="toggleCell(this,true)" onmouseout="toggleCell(this,false)">1</td>
<td class="cellRegular" onmouseover="toggleCell(this,true)" onmouseout="toggleCell(this,false)">2</td>
<td class="cellRegular" onmouseover="toggleCell(this,true)" onmouseout="toggleCell(this,false)">3</td>
</tr>
...

By the way, this works in Internet Explorer. I don't know if it works now in Netscape; it didn't with version 4.

You can also set each style component separately in the JS function.

function toggleCell( ob, highlighted ) {
 if ( highlighted ) {
  ob.style.backgroundColor = "#d0d0d0";
  ob.style.color = "black";
  ob.style.cursor = "hand"; // I'm not sure about this one--JS may not like it.
  ob.style.textDecoration = "underline";
 } else {
  ob.style.backgroundColor = "#202020";
  ob.style.color = "white";
  ob.style.cursor = "default"; // may not work in JS
  ob.style.textDecoration = "none";
 }
}

Again, this works in IE, but may not in NN.

- Edited By scope.creep On Sat 27th, Sep 2003 @ 11:53:28pm

i would like to do this without any java though, just pure html and css

i know it can be done... this is the only reference i have to a css page that does it though:

body {
margin-top : 10px;
margin-right : 20px;
margin-bottom : 20px;
margin-left : 20px;
font-family : Arial, Helvetica, sans-serif;
font-weight : normal;
}

a:link {
text-decoration : none;
}

a:visited {
text-decoration : none;
}

a:hover {
text-decoration : none;
}

a.dash:link {
border-bottom : 1px dashed;
}

a.dash:visited {
border-bottom :  1px dashed;
}

a.dash:hover {
border-bottom :  1px solid;
}

h1 , h2 , h3 , h4 , h5 , h6 {
font-family : "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
font-weight : normal;
}

.head , .headbox , .dynabox , a.leftmenu , a.topmenu {
font-weight : bold;
text-decoration : none;
font-size : 80%;
font-family : Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
}

a                  {color : #000000; }
.topnav a:hover, .dynabox .headbox a:hover       {color : #ffffff; }

.pos0 , body               {background-color : #ffffff; color : #000000; }
.pos1 , .mainbox , .dynabox , a.leftmenu:link , a.leftmenu:visited  {background-color : #d0e1f5; border : #000000; color : #000000; }
.pos2 , .topnav , a.leftmenu:hover          {background-color : #98c2f0; color : #000000; border : #000000; }


.neg0                 {background-color : #000000; }
.neg1 , a.topmenu:hover            {background-color : #4d75a0; color : #ffffff; border : #000000; }
.neg2 , .headbox , a.topmenu:link , a.topmenu:visited     {background-color : #7d9fc4; color : #ffffff; border : #000000; }

a.leftmenu:link {
display : block;
padding-top : 2px;
padding-right : 2px;
padding-bottom : 2px;
padding-left : 2px;
border-style : solid;
border-top-width : 0;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
width : 145px;
font-weight : normal;
text-align : left;
}

a.leftmenu:hover {
display : block;
padding-top : 2px;
padding-right : 2px;
padding-bottom : 2px;
padding-left : 2px;
border-style : solid;
border-top-width : 0;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
width : 145px;
font-weight : normal;
text-align : left;
}

a.leftmenu:visited {
display : block;
padding-top : 2px;
padding-right : 2px;
padding-bottom : 2px;
padding-left : 2px;
border-style : solid;
border-top-width : 0;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
width : 145px;
font-weight : normal;
text-align : left;
}

a.topmenu:link {
display : inline;
padding-top : 5px;
padding-right : 0;
padding-bottom : 5px;
padding-left : 0;
border-style : solid;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0;
border-left-width : 1px;
text-align : center;
}

a.topmenu:hover {
background-color : #4d75a0;
display : inline;
padding-top : 5px;
padding-right : 0;
padding-bottom : 5px;
padding-left : 0;
border-style : solid;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0;
border-left-width : 1px;
text-align : center;
}

a.topmenu:visited {
display : inline;
padding-top : 5px;
padding-right : 0;
padding-bottom : 5px;
padding-left : 0;
border-style : solid;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0;
border-left-width : 1px;
text-align : center;
}

.headbox {
display : block;
padding-top : 2px;
padding-right : 2px;
padding-bottom : 2px;
padding-left : 2px;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
border-style : solid;
width : 145px;
text-align : left;
}

.topbox {
border : 1px solid ;
height : 55px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 0;
}

.topnav {
border : solid ;
border-width : 0 1px 1px;
padding-top : 3px;
padding-bottom : 0;
}

.mainbox {
border : solid ;
border-width : 1px 0 1px 1px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
}

.mainbox p {
font-size : 85%;
}

.mainbox p a {
font-weight : bold;
font-size : 90%;
}

.dynabox {
border : 1px dashed ;
text-align : center;
}

.dynabox .headbox {
border-style : dashed;
border-top-style : solid;
border-right-width : 0;
border-left-width : 0;
padding-top : 3px;
padding-left : 0;
padding-right : 0;
padding-bottom : 3px;
}

.dynacontent {
padding-top : 3px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 3px;
text-align : left;
font-size : 70%;
font-weight : normal;
} 

dunno if that helps you at all though

Are you sure you can do it via pure HTML and CSS? By the look of that CSS you just showed us, I don't think it was done that way.

The :hover pseudo-class is just a shortcut for the mouseover event for screen elements. Incidentally, that also is an IE-specific functionality. When you use it, you're using JavaScript, though transparently. You can do the similar stuff with it.

<style type="text/css"><!--
td {
background-color: #202020;
border-color: black;
border-style: solid;
border-width: 1px;
color: white;
text-decoration: none;
}
td:hover {
background-color: #d0d0d0;
border-color: black;
border-style: solid;
border-width: 1px;
color: black;
cursor: hand;
text-decoration: underline;
}
--></script>

Basically, anytime you want mouseover/mouseout changes to the appearance of any particular screen element, you can use the :hover pseudo-class. In the example above, anytime the mouse pointer is hovering over a table cell, the background and text colors will change, etc. You can define :hover attributes for other elements as well, and the effects will be cumulative (as in your posted code). What it boils down to is that once you figure out what you want your screen to do, you figure what screen elements are affected and apply your :hover stuff accordingly.

Quackzilla wrote: i can't help you

Im sure that post helped him

n00bish effect, why bother?

i was trying to figure out how they made the links in Oswd.org work... its a kinda cool effect, i thought, and wanted to know how they did it, instead of just ripping the code

Heh... You might get a kick out of my bs site. Just for fun, check out Scope-creep.com to see what you think... and be sure to view the source. Just so you'll know, there isn't anything really worthwhile there--I think the jokes are about the only thing I ever bothered to add. I did it just to see if I could create a site with obfuscated html, and once I figured out what I wanted to do and how to do it, I rather quickly lost interest. The content is ancient, and I do not update it... heck, I rarely update the site for my mod when it comes right down to it. It is pretty cool though, and was sure fun to make.

As for how they did it, every screen element has a rectangular bounding box, and applying css values to the element affects everything in the box. In this particular case, he specified several attributes for anchor tags, in fact different values for the different classes of anchor tags (some in the left menu, others in the content, etc). If a more detailed explanation is needed, perhaps you should specify what feature (or features) has you mystified and we can go from there.

so the effect i want is really just pseudo java?

rather depressing, i didnt want to have to learn java in order to do it, ah well, i guess

PsychoFarmer wrote: i was trying to figure out how they made the links in Oswd.org work... its a kinda cool effect, i thought, and wanted to know how they did it, instead of just ripping the code

I believe that's called DHTML not Java

Java and JavaScript are totally different things people, Java is like C, and can make fully fledged programs, JavaScript is webbrowser only.

You already ripped there design, why not rip there css?

I remember the uploaded design.

the design was quite cool

and i dont want to just rip the css, because i want to understand what they did, otherwise it does me no good at all... and i cant format it well, because i dont know what they did, so all i can do is change text and colors, essentially