How to make :hover

HTML-CSS
1

Have a small pen. Need to fill all <td> with cellspacing. How can I do it?
On shortcut displayed the area, which I wanted to fill.

image

https://codepen.io/smithunderpass/pen/jajRdr

2

I didn’t quite understand you, but if you want to hover td, here:
td:hover{
background-color: ;
}

EDIT:
If you want to create a cellspacing table, you have to edit table tag, something like this:
<table cellspacing="10">

3

Now i need to disable hover for first <tr> of the table…
My variation isn’t work(( :disappointed_relieved:

image

4

Try this :slight_smile:

tr:first-of-type td:hover {
background: #fff;
}

You have to target hover on td, not tr

1 Like
5

Already done.
image

But I don’t understand, why if i set bg-color: #fff(without choosing a color for :hover) , color of text is becoming white too…

image

6

because when you put bgd on hover… the whole td is becoming white. You have to declare color.

7

Ok…
Thanks for answer) :grinning::belarus:

8

You welcome mate :slight_smile:
Keep coding :slight_smile: :muscle:

9

because you have

td:hover{
  background-color: #4F4D5F;
  color: white;
  cursor: pointer;
}

The td:hover css will get applied to all td. You will need to overwrite it using css selector that is more specific than td:hover. Using tr:first-of-type td:hover is one way to do it.

2 other ways you can do it:

  1. Using tr + tr td:hover selector instead of just td:hover. Because you know you will always skip the first tr and the first tr is always days.

  2. Using class on each tr. <tr class="day"></tr> and <tr class="date"></tr>.

.date td:hover {
  background-color: #4F4D5F;
  color: white;
  cursor: pointer;
}

Personally, I’ll always prefer to have explicit class naming and rules than just using HTML as selector.

10

Thanks for the explanation :space_invader: