Apply background color to every 1+2 and 3+4 on hover

[Yonikenneth]

Hey!

I have a table like this:

label 1

content 2

label 3

content 4

And I want to have a background color on hover per two td’s (label + content). The problem is, when you hover nth-child(2), :first-child doen’st get the same background because there is no going back or up in CSS.

Anybody have an idea how to solve this?

Thanks!

[Senff]

Not sure if this is what you mean?

http://www.codepen.io/senff/pen/BsJmc

[Yonikenneth]

No that’s not it.

See my example of how it should be. The different colors respresent the hover areas.

http://i36.tinypic.com/zmgocn.png

Thanks!

[Paulie_D]

How is this table structured?

[Senff]

Hmmm… this then? http://www.codepen.io/senff/pen/BsJmc (pen updated)

[Paulie_D]

I’m thinking it’s more like this: http://www.codepen.io/anon/pen/iaGoI

Still can’t work the hover on the ‘even’ items because (as has been said) you can’t select a parent.

JS the answer I feel.

[CrocoDillon]

> JS the answer I feel.

Or not using a table.

[Paulie_D]

Well, on looking at the image, it is **kinda** tabular data.

I certainly could be done in other ways which might make it easier but there would still be the selecting the ‘previous’ element issue.

[CrocoDillon]

It could be tabular data (if there were more then one entity), but then the rows would be entities and the columns would be labeled by a header. Not sure but it doesn’t seem like semantic use of tables how it is now.

[Senff]

Yea, if it HAS to be one table and nothing else, JS is the answer.

However if the table cells are allowed to have elements (either another table, or divs) then it can be done without JS.

[CrocoDillon]

If it HAS to be a table the structure would be something like this to be any semantic:

`

City	Country	Company department	Hours per week	Salary	Startdate
Enschede	German	Business to Trade	40	Millions	01-06-2013

`

Is it possible to style this to look like the image?

[Yonikenneth]

Sorry about that, forgot to post the link.

Here you go: http://www.cygnific.com/vacancies/customer-contact-representative-german/

[Yonikenneth]

@Paulie_D This looks good! It may be the solution, thanks! I’ll try implementing this.

@Senff, @CrocoDillon Yes it HAS to be a table, as for the table is being filled by a CMS.

I also tried jQuery:

$(document).ready(function() {

$("tr > td").hover(function() {

$(this).toggleClass("active");

});

$("tr > td").hover(function() {

$(this).next("td").toggleClass("next");

});

$("tr > td").hover(function() {

$(this).prev("td").toggleClass("prev");

});

});

[Yonikenneth]

@Paulie_D your solutions is coming close, but it taking your codepen as example, try hovering over the “content” td’s – there’s the problem… it does’nt get the same background color.

So this is where it gets interesting! I think with the script in my previous post the solution is within arms reach.

[CrocoDillon]

If you’re going with jQuery: http://codepen.io/anon/pen/ufilE

[Author]

Posts