d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Css Issue
Add Reply New Topic New Poll
Member
Posts: 14,067
Joined: Oct 8 2005
Gold: 352.12
Mar 11 2014 04:37pm
Hi guys, what is the easiest way to create the below;




I want to make the css commands only valid for this table / div. I.E i dont want all links through the site in the same format.

Looks like a table with an onhover different color text/background. Cant seem to get the text to change color when hovering in the box and not directly over the text.

Any advice is appreciated

Many thanks

This post was edited by demonblade05 on Mar 11 2014 04:38pm
Member
Posts: 2,736
Joined: Nov 28 2009
Gold: 34.00
Mar 11 2014 08:27pm
i dont know sry the element doesnt have any style!
Member
Posts: 2,217
Joined: Sep 10 2007
Gold: 35.88
Mar 12 2014 10:42am
something like the following should work

.text { color: black; }
.box {background-color: white; }

.box:hover .text {color: white; }
.box:hover {background-color: black; }

.

This post was edited by grievance on Mar 12 2014 10:43am
Member
Posts: 14,067
Joined: Oct 8 2005
Gold: 352.12
Mar 13 2014 03:06pm
Quote (grievance @ Mar 12 2014 04:42pm)
something like the following should work

.text { color: black; }
.box {background-color: white; }

.box:hover .text {color: white; }
.box:hover {background-color: black; }

.


Code
<style style="text/css">
.hoverTable{
width:80%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px;

}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #F2F6E6;
padding-bottom: 15px;

}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #333333;
color:#FFF;

}
a:hover {
color:#FFF;
}
</style>


This is what i use. When i hover over the box it highlights the background. but it should highlight background + text. Only when i hover over the text link it changes
Retired Moderator
Posts: 18,570
Joined: Feb 27 2004
Gold: 11,858.00
Trader: Trusted
Mar 13 2014 10:17pm
Quote (demonblade05 @ Mar 13 2014 03:06pm)
Code
<style style="text/css">
  .hoverTable{
  width:80%;
  border-collapse:collapse;
}
.hoverTable td{
  padding:7px;

}
/* Define the default color for all the table rows */
.hoverTable tr{
  background: #F2F6E6;
  padding-bottom: 15px;
 
}
/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #333333;
    color:#FFF;
   
    }
a:hover {
  color:#FFF;
}
</style>


This is what i use. When i hover over the box it highlights the background. but it should highlight background + text. Only when i hover over the text link it changes


Put the color:#FFF; inside of your .hoverTable tr{}

The way you currently have it you're saying on a:hover (the link only) is when it will change.
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll