Back To Website Design Forum

Table mouseover change cell color and text style together

  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post October 20th, 2010, 3:03 am

Hi guys, I need help: :?:
How can I make a code that when I put my mouse over a cell of the table, it will change its cell(link) color together with the text(not link) using css. Can you give a sample code.

Thank you so much guys!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 20th, 2010, 3:03 am

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 20th, 2010, 3:55 am

yeah that's pretty simple with the ":hover" psuedo class ...

for example:
CSS Code: [ Select ]
table tr td{
background-color:#ff0000; /*blue background*/
color:#000000; /*black text*/
}
table tr td:hover{
background-color:#00ff00;/*green*/
color:#ffffff; /*white text*/
}
  1. table tr td{
  2. background-color:#ff0000; /*blue background*/
  3. color:#000000; /*black text*/
  4. }
  5. table tr td:hover{
  6. background-color:#00ff00;/*green*/
  7. color:#ffffff; /*white text*/
  8. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post October 20th, 2010, 6:21 am

Yeah that will work and thanks, but what if it's link?

Example:
HTML Code: [ Select ]
<html><head>
<*style type="text/css">
body{background-color: skyblue;color: red;text-align: center;font-family: arial;}
div{text-align: center;}
h1{background-color: gold;color: blue;font-size: 40px;}
a:hover,td.menu:hover{background-color: purple;color: gold;font-family: "Algerian",Castellar,Cooper Black,Arial Black,Impact,Cursive,Times New Roman;}
a,td.menu{background-color: red;color: blue;font-family: "Forte",Brush Script MT,Curlz MT,Chiller,Monospace,Baskerville Old Face;}
table{width: 100%;background-color: gold;color: lime;}
</style></head>
<body>
<h1>Welcome</h1>
<hr />
<table border="5" cellpadding="4" cellspacing="5">
    <tr>
        <td class="menu" title="Main">
            <a href="Home.html">Home</a>
        <td class="menu" title="Talk/Chat">
            <a href="Forum.html">Forum</a>
        <td class="menu" title="Ask/Search">
            <a href="Help.html">Help</a>
        <td class="menu" title="Leave">
            <a href="Quit.html">Quit</a>
    </tr>
Some Text Here!
 
</body>
</html>
  1. <html><head>
  2. <*style type="text/css">
  3. body{background-color: skyblue;color: red;text-align: center;font-family: arial;}
  4. div{text-align: center;}
  5. h1{background-color: gold;color: blue;font-size: 40px;}
  6. a:hover,td.menu:hover{background-color: purple;color: gold;font-family: "Algerian",Castellar,Cooper Black,Arial Black,Impact,Cursive,Times New Roman;}
  7. a,td.menu{background-color: red;color: blue;font-family: "Forte",Brush Script MT,Curlz MT,Chiller,Monospace,Baskerville Old Face;}
  8. table{width: 100%;background-color: gold;color: lime;}
  9. </style></head>
  10. <body>
  11. <h1>Welcome</h1>
  12. <hr />
  13. <table border="5" cellpadding="4" cellspacing="5">
  14.     <tr>
  15.         <td class="menu" title="Main">
  16.             <a href="Home.html">Home</a>
  17.         <td class="menu" title="Talk/Chat">
  18.             <a href="Forum.html">Forum</a>
  19.         <td class="menu" title="Ask/Search">
  20.             <a href="Help.html">Help</a>
  21.         <td class="menu" title="Leave">
  22.             <a href="Quit.html">Quit</a>
  23.     </tr>
  24. Some Text Here!
  25.  
  26. </body>
  27. </html>


*As you can see, when you point the cell, it will be highlighted and the text not; when you point the text inside the cell, they are both highlighted;

*I want them to highlighted together whatever you point from your mouse.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 20th, 2010, 6:40 am

CSS Code: [ Select ]
table tr td:hover a{
/* your style here for the a */
}
  1. table tr td:hover a{
  2. /* your style here for the a */
  3. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post October 20th, 2010, 7:38 am

I hope this gonna be my last question:
If I do that, my cellspacing will be colorless, is there another way? How can I assign the background-color of my table?

You think this will do? Now I know: :D
:idea: :idea: :idea: :idea: :idea:
HTML Code: [ Select ]
<... onClick="window.location.href='xXx.html'">

I think that can be use by <td>!!! :idea:

Again Thank you so much!!! :mrgreen:
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post October 20th, 2010, 8:02 am

so do the following:

HTML Code: [ Select ]
<table cellpadding="0" cellspacing="0">
 <tr>
  <td><a href="xXx.html"></a></td>
 </tr>
</table>
  1. <table cellpadding="0" cellspacing="0">
  2.  <tr>
  3.   <td><a href="xXx.html"></a></td>
  4.  </tr>
  5. </table>


CSS Code: [ Select ]
table tr td{
padding:5px;
background-color:#0000ff;
}
table tr td a{
display:block;
width:100%;
height:100%;
}
  1. table tr td{
  2. padding:5px;
  3. background-color:#0000ff;
  4. }
  5. table tr td a{
  6. display:block;
  7. width:100%;
  8. height:100%;
  9. }


This cancels out the javascript approach that you want to take ... If you really want to do it with javascript then it should be "onclick" and not "style";
Let's leave all our *plum* where it is and go live in the jungle ...

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 121 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.