Links, Hover & Mouseover w/CSS

I just created a little HTML file of Addall’s (books) browsing categories and I had a couple of questions. I’m trying to do this with CSS as opposed to Javascript.

Question 1:
Is there a mouseover technique to change the background of the >cell, as opposed to just the link?

Question 2:
Beginning with the row “Aftermath of Crime”
can I specify those rows — with small-text link info — not to be bold when I hover?

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>ADDALL MYSTERIES</title>

<style type="text/css">
a:link {color: BLUE; text-decoration: NONE;}
a:visited {color: BLUE; text-decoration: NONE;}
a:hover {background-color: #FFFFCC; color: BLACK; font-weight: bold; text-decoration: NONE}
a:active {background-color: #FFFFCC; color: BLACK; font-weight: bold;  text-decoration: NONE}
</style>

</head>

<body style="font-size: 14px; line-height: 14px; width: 100%; height: auto;">
<table border="4" align="center" cellpadding="10" cellspacing="4" style="font-family: helvetica, arial, sans-serif;">

<tbody>

<tr>
<td align="right" valign="middle" nowrap bgcolor="#FFFFCC">
<font size="4"><b>HISTORICAL MYSTERIES</b></font></td>
<td align="left" valign="middle"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Historical_Mysteries--62279" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Historical_Mysteries--62279</a>
</font></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap bgcolor="#FFFFCC">
<font size="4"><b>BIBLIO MYSTERIES</b></font></td>
<td align="left" valign="middle"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Biblio-mysteries--62265" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Biblio-mysteries--62265</a>
</font></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap bgcolor="#FFFFCC">
<font size="4"><b>CELEBRITY</b></font></td>
<td align="left" valign="middle"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Celebrity--62418" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Celebrity--62418</a>
</font></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap bgcolor="#FFFFCC">
<font size="4"><b>COMEDY &amp; PARODY</b></font></td>
<td align="left" valign="middle"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Comedy_and__Parody--62267" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Comedy_and__Parody--62267</a>
</font></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap bgcolor="#FFFFCC">
<font size="4"><b>ENGLISH ARISTOCRAT</b></font></td>
<td align="left" valign="middle"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/English_Country_House--62273" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/English_Country_House--62273</a>
</font></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap bgcolor="#FFFFCC">
<font size="4"><b>ENGLISH COUNTRY HOUSE</b></font></td>
<td align="left" valign="middle"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/English-Aristocrat--62274" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/English-Aristocrat--62274</a>
</font></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap bgcolor="#FFFFCC">
<font size="4"><b>SUPERNATURAL</b></font></td>
<td align="left" valign="bottom"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Supernatural--67991" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Supernatural--67991</a>
</font></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap bgcolor="#B6FF76">
<font size="4"><b>SHORT STORIES</b></font></td>
<td align="left" valign="bottom"><font size="3">
<a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Short_stories--62293" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Short_stories--62293</a>
</font></td>
</tr>


<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">AFTERMATH OF CRIME</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Aftermath_of_Crime--62460" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Aftermath_of_Crime--62460</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>AMATEUR DETECTIVES</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Amateur_Detectives--62285" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Amateur_Detectives--62285</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">ART WORLD</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Art_World--67693" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Art_World--67693</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">COLLEGE &amp; UNIVERSITY </font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/College_and_University--62266" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/College_and_University--62266</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">COUNTRY VILLAGES</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Country_villages--62434" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Country_villages--62434</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">COURTROOM</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Courtroom--62435" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Courtroom--62435</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>CRIME &amp; CAPER</b> </font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Crime_and_Caper--62269" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Crime_and_Caper--62269</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>CRIMINAL PERSPECTIVE</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Criminal__Perspective--62461" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Criminal__Perspective--62461</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">DETECTIVE DUOS</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Detective_Duos--68458" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Detective_Duos--68458</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">DOCTOR DETECTIVES</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Doctor-Detectives--62271" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Doctor-Detectives--62271</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">EX COP</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Ex-Cop--62275" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Ex-Cop--62275</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">FORENSIC</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Forensic--62424" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Forensic--62424</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">GENRE WRITER CONVENTIONS</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Genre_Writer__Conventions--62277" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Genre_Writer__Conventions--62277</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>GOTHIC</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Gothic--62459" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Gothic--62459</a>
</font></td>
</tr>


<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">HOTELS, INNS, BED &amp; BREAKFASTS </font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Hotels,_inns,_bed_and_breakfasts--62436" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Hotels,_inns,_bed_and_breakfasts--62436</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">HUSBAND &amp; WIFE </font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Husband_and_wife--62281" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Husband_and_wife--62281</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">INSPIRATIONAL</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Inspirational--62415" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Inspirational--62415</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>JOURNALIST</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Journalist--62282" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Journalist--62282</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">LAWYER</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Lawyer--62283" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Lawyer--62283</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">LEGAL</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Legal--62454" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Legal--62454</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">LOCKED ROOM</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Locked_Room--62284" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Locked_Room--62284</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">MEDICAL</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Medical--62431" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Medical--62431</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>NOIR, HARDBOILED</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Noir,_hardboiled--62407" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Noir,_hardboiled--62407</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">POLICE</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Police--62287" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Police--62287</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">POLITICAL</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Political--62455" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Political--62455</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>PRIVATE DETECTIVE</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Private_Detective--62288" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Private_Detective--62288</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">PSYCHOLOGICAL</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Psychological--62456" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Psychological--62456</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">PSYCHOPATHIC KILLER</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Psychopathic_Killer--62289" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Psychopathic_Killer--62289</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">PUZZLERS</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Puzzlers--62437" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Puzzlers--62437</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>ROGUE</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Rogue--62290" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Rogue--62290</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">ROMANTIC</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Romantic--62426" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Romantic--62426</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">SENIOR CITIZEN DETECTIVES</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Senior_Citizen_Detectives--62292" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Senior_Citizen_Detectives--62292</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">SERIAL KILLER</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Serial_killer--62404" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Serial_killer--62404</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">SIDEKICKS</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Sidekicks--68459" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Sidekicks--68459</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2">STALKERS</font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Stalkers--62462" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Stalkers--62462</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>SUSPENSE</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Suspense--62295" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Suspense--62295</a>
</font></td>
</tr>

<tr>
<td align="right" valign="bottom" nowrap>
<font size="2"><b>THEATRICAL</b></font></td>
<td align="left" valign="bottom"><font size="1"><a href="http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Theatrical--62427" target="_blank">http://addall.com/info/Fiction_Genres--2180204/Mystery_and_Crime--62263/Theatrical--62427</a>
</font></td>
</tr>

</tbody>
</table>

</body>
</html>

Question 1.

td:nth-child(2):hover {background-color:#ff0;}

When one hovers over the link, the font-size becomes larger and causes the page to “jump” wider. “Bold” usually does that. Changing the font-size or setting it to bold with hover is usually not recommended unless there is sufficient width to avoid the “jump”.

Question 2.

Apply a class to the last row to have a bold font on hover.
eg: <tr class="lastboldonhover">
and add this CSS in the head of the page

tr.lastboldonhover ~ tr td:nth-child(2) a {font-weight:normal;}

I never thanked you for that RonPat. Very helpful. What I ended up doing was expanding the column so that little jump you mentioned doesn’t rub up against its container.

Thanks for the feedback, semicolon. Glad to hear that it worked out well.

Ronpat, could I trouble you again to help me with another Hover / Onmouseover project? This is a TEXT-ONLY 3-row table that I was hoping to be able to:

  • convert to a Tableless Design with different borders & styles on the columns (and if possible on selected cells); and
  • more specifically, have the KBD column (COLUMN 2) render Hover styling on such things as
    1. a unique border on the hovered popup
    2. a unique font & style
    3. a background color (please use YELLOW) invoked with a mouse hover on plain text (there is no link)

This is a mess that I’ve played with for hours, but as per usual I’m obviously way out of my league. :confused:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="charset=UTF-8; text/html" http-equiv="Content-Type">
<title>HOVER &amp; ONMOUSEOVER TEST</title>

<style type="text/css">
#kbd, code, pre, samp, var {
  padding: 1px;
  font-size: 18px;
  line-height: 18px;
  font-family: LUCIDA CONSOLE, MONOSPACE;
  hover background-color: YELLOW;
  }
</style>
</head>

<BODY STYLE="font-size: 16px; line-height: 16px; font-family: HELVETICA, ARIAL, SANS-SERIF;">
<table width="90%" cellpadding="10" cellspacing="4">
  <tbody>
    <tr>
      <td width="20%" align="right" valign="middle" bordercolor="#FF9934 2px"> <img src="http://sitepoint.com/favicon.ico" alt=""></td>
      <td width="30%" align="center" bordercolor="#007FFF 2px">
<kbd>Hover HiLiGHt</kbd></td>
      <td width="30%" align="left" bordercolor="LIME">COLUMN 3</td>
      <td width="10%" align="left" bordercolor="DEEPPINK">COLUMN 4</td>
    </tr>
    <tr>
      <td width="20%" align="right" valign="middle" bordercolor="#FF9934"> <img src="http://sitepoint.com/favicon.ico" alt=""></td>
      <td width="30%" align="center" bordercolor="#007FFF">
<kbd>Hover HiLiGHt</kbd></td>
      <td width="30%" align="left" bordercolor="LIME">COLUMN 3</td>
      <td width="10%" align="left" bordercolor="DEEPPINK">COLUMN 4</td>
    </tr>
    <tr>
      <td width="20%" align="right" valign="middle" bordercolor="#FF9934"> <img src="http://sitepoint.com/favicon.ico" alt=""></td>
      <td width="30%" align="center" bordercolor="#007FFF">
<kbd>Hover HiLiGHt</kbd></td>
      <td width="30%" align="left" bordercolor="LIME">COLUMN 3</td>
      <td width="10%" align="left" bordercolor="DEEPPINK">COLUMN 4</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Hi, semicolon. I’m sorry for the delay responding to your message. My PC is sick and was unable to talk to the world yesterday.

I will look at your code now.

My interpretation of your request…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>:hover test</title>
    <style type="text/css">
body {
    font-size: 16px;
    line-height: 16px;
    font-family: Helvetica, Arial, sans-serif;
}
kbd, code, pre, samp, var {
    padding:1px;
    font-size:18px;
    line-height:18px;
    font-family:"Lucida Console", monospace;
}

/* style the table */
.table {
    display:table;
    width:90%;
    border-spacing:4px 4px;
    margin:0 auto;
}
.trow {display:table-row;}

/* these styles apply to all cells */
.tcell {
    display:table-cell;
    vertical-align:middle;
    padding:10px;
}

/* these styles are applied per column */
.col1 {
    width:20%;
    text-align:right;
    border:2px solid #ff9934;
}
.col2 {
    width:30%;
    text-align:center;
    border:2px solid #007fff;
}
.col3 {
    width:30%;
    text-align:left;
    border:2px solid #0f0;
}
.col4 {
    width:10%;
    text-align:left;
    border:2px solid #ff1493;
}

/* target specific cells (in this case, target all cells in col2) and apply :hover styles to the box and kbd tag */
.col2:hover {
    background-color:rgba(255,255,0,.5);
    box-shadow:0 0 3px 0 #00f;
}
.col2:hover kbd {
    font-family:'Lucida Calligraphy',serif;
}

    </style>
</head>
<body>

<div class="table">
    <div class="trow row1">
        <div class="tcell col1"><img src="http://sitepoint.com/favicon.ico" alt=""></div>
        <div class="tcell col2"><kbd>Hover HiLiGHt</kbd></div>
        <div class="tcell col3">COLUMN 3</div>
        <div class="tcell col4">COLUMN 4</div>
    </div>
    <div class="trow row2">
        <div class="tcell col1"><img src="http://sitepoint.com/favicon.ico" alt=""></div>
        <div class="tcell col2"><kbd>Hover HiLiGHt</kbd></div>
        <div class="tcell col3">COLUMN 3</div>
        <div class="tcell col4">COLUMN 4</div>
    </div>
    <div class="trow row3">
        <div class="tcell col1"><img src="http://sitepoint.com/favicon.ico" alt=""></div>
        <div class="tcell col2"><kbd>Hover HiLiGHt</kbd></div>
        <div class="tcell col3">COLUMN 3</div>
        <div class="tcell col4">COLUMN 4</div>
    </div>
</div>

</body>
</html>

For all practial purposes, this is a direct conversion from your HTML table code to CSS based “table” code (with :hover styles added). The class names that I have used should make most of the relationships very easy to spot. A little study and you should be blazing your way up to speed!!!

1 Like

RONPAT did propound . . .

For all practial purposes, this is a direct conversion from your HTML table code to CSS based “table” code (with :hover styles added). The class names that I have used should make most of the relationships very easy to spot. A little study and you should be blazing your way up to speed!!!

It’s perfect my friend, thank you. :+1:

This was one of those little projects I was certain I’d be able to put together without help. What bedeviled me was creeping uncertainty as to whether I should use Hover or Mouseover. I must have bookmarked dozens of websites — a healthy percentage being Sitepoint guides — but no matter how I tried adapting these resources I just couldn’t get anything to work. As such things go however, a little gem introduced itself to me that is of existential significance.

Line-Heights: The < p > Tag

All these years I’ve been avoiding < p > tags because their loose line-heights ruined the tight “letting” of my content. Yesterday while reading someone’s hover code and trying to modify it to my needs I noticed this:

  p {line-height: 100%;} 

This being the official P Grail for me I tested it to see just how durable it was with even the most obnoxious of typographical line-heights and it worked like a champ. There must be dozens (hundreds?) of coding styles available to me now just by giving P a long-overdue :eyes: (it’s probably silly but I can’t tell you what a thrill that was).

So ronpat, let me ask you something about < p> because I’m not certain exactly what that line of code (above) is. Is it a Class? an ID? a something else?

And given the fact every page of HTML code I write from this day forward will be disciplined to a 100% line-height permanently, would you code it the way I’ve declared above, or some other way? Thanks ronpat.

s

<p> is a bare, nonspecific paragraph tag. It is neither an ID nor a class. You can add a class or an ID to a tag to make it more specific… but a tag alone is a basic selector.

EDIT:

Back to that matrix in the previous post. I demonstrated how to target rows of cells and columns of cells but not a single cell. If you wanted to target a single cell you would first identify the row and then the column, just like in a spreadsheet.

For example:

.row2 .col3 {styles here}

would target the third cell in the second row.

1 Like

Okay so . . . the way I have < P > added in my example is okay?

Declaring styles for P or any element is valid. Whether or not doing so is OK depends.
As long as you want every p to have those styles (unless you over-ride them later with more specific rules) then sure, OK

1 Like

Absolutely

With awareness/respect given to @Mittineague 's cautions regarding specificity.

1 Like

[quote=“Mittineague, post:11, topic:99712”]
Declaring styles for P or any element is valid. Whether or not doing so is OK depends.As long as you want every p to have those styles (unless you over-ride them later with more specific rules) then sure, OK[/quote]
Got it. :eyes: :

[quote=“ronpat, post:7, topic:99712”]
For all practial purposes, this is a direct conversion from your HTML table code to CSS based “table” code (with :hover styles added).[/quote]

Hey ronpat I just wanted to thank you for that little “shading” style!

.col2:hover {
	     background-color:rgba(255,255,0,.5);
	     box-shadow:0 0 3px 0 #00f;

Could you expand a bit on these two elements: background-color: :point_right: rgb a (255,255,0, :point_right:.5);

And more to the point, for use with a HEX (non RGB) declaration? Thanks.

s

Sure.

The color rgba(255,255,0,.5) is “yellow”, #ff0, with 50% transparency written as a decimal value between 0 (fully transparent, invisible) and 1 (opaque). The transparency necessarily reduces the density of the color and allows any background image that may exist to peek through the color. I could have just as easily used #ff8, or thereabouts. It’s a design choice and I chose to demonstrate the newer, more flexible technique in hopes that it might be enlightening to you.

In HEX, the property would be

.col2:hover {
    background-color:#ff8;

or thereabouts.
The boldest shade of yellow would be #ff0.

In your post, you mentioned that you might want to treat the border special, too, so I picked box-shadow to enhance the border since it does not affect the dimensions of the box. One could also use an outline to avoid altering the dimenstions of the box, but it would not provide the stylish shading effect.

Does that help?

[quote=“ronpat, post:14, topic:99712”]
Does that help?[/quote]

No. The opacity value breaks it. :weary:

I was asking if the explanation was helpful. Apparently it wasn’t.

In what browser??? Knowing the browser or version of the browser in which problems occur is often useful information to impart.

Then don’t use the rgba code for the color, use the good old reliable HEX code that I posted in the last message.

All your posts are valuable to me ronpat. The trouble isn’t the HEX color; the trouble is the 50% opacity and the multiple ways I experimented to get it to work. FF32.

Removal of

.col2: HOVER KBD {

Inclusion with

.col2: HOVER KBD {

Duplication of all 3 lines on each style

background-color: #FEFFB3; opacity: .5;
box-shadow: 0 0 3px 0 #007FFF;
font-family: LUCIDA CONSOLE, MONOSPACE;}

Various

background:
opacity
#FEFFB3 .5;
#FEFFB3, .5;
"#FEFFB3" .5;
#FEFFB3 (.5);

I never post here unless I have exhausted hours of trying to solve any issue on my own. I don’t know of any other way of focusing that the problem is not the HEX code. This works

background-color: #FEFFB3;

and (every iteration above) doesn’t.

Edit: I’m going to explore something called SASS, and in the meantime fool around with these HOVER TEMPLATES I just discovered on ghub

OK, from this I gather that your code is simply wrong… malformed… misunderstood… whatever.

“background:” or “background-color:” is a property, “#feffb3” or “rgba(255,255,0,.5)” or “rgb(255,255,128)” are examples of the color “values” used by that property.

“opacity:” is a property. It is written on a line by itself (or delimited by a semicolon). The values for “opacity” are between 0 and 1 just as the opacity/transparency value in rgba code is written.

“opacity:” is a property, it is not a value of “background:”. That distinction is important. One does not write “background:” or “background-color:opacity .5”. That is invalid code.

There is little need to exhaust hours of experimenting when a little reading will sometimes solve the puzzle. I frequently double-check my memory of properties and their valid values (especially since CSS3 was introduced). If you wonder if you are writing the code correctly, there are several web resources you can use including http://reference.sitepoint.com/css for CSS2. For adequate basic descriptions you can use http://www.w3schools.com/cssref/default.asp. The latter is a useful quick reference.

I hope this is helpful (it’s supposed to be, anyway)

SASS is something I’ve never tried. Let me know how it works for you.

I apologize for my phrasing, semicolon. What I meant was that I do not always anticipate how my explanations might be interpreted. They sound OK to me, but that’s only half of the trip. The recipient of the message is the other half and may hear something that I did not realize I was implying. I am not a perfect communicator, but I do sincerely try.

I do not doubt that. In this case, I could not glean the nature of the problem from what little you expressed. I had no idea that you had gone “creative”.

I probably should have just hunted for rgba to begin with ronpat. The reason I didn’t is because I thought the “a” was somehow severable from RGB — an optional style if you prefer to define your colors as long-style RGB values — and for those of us who prefer HEX, appended in some way and looking like some of the experiments I listed above.

In fact, it’s beyond pathetic! It doesn’t like Explorer, it has issues with Firefox, and you can spend hours (as I have) culling the net to find CSS alternatives. Realistically there are none. There are scripts and function workarounds but they are inelegant to put it mildly.

I thought one particular strategy was quite clever and might return to it at some point: Upload a 1x1 gif with the rgb values you need, flood the cell with it on HOVER; and unless I’m much mistaken it might even work on Explorer . . . :performing_arts: