CSS – changing multiple ID’s on hover

[yodanski]

Hi all,

n00b alert!

I have this visual representation of a Mac keyboard written in CSS.
Now I’d like to make several keys ‘light up’ (by changing border color)
when I hover over a line of text with a certain class.

This way I’d like to visualize keyboard shortcuts.

Is this possible with CSS or should I do this in Javascript?

I’m confused. Suggestions welcome,

Thanks.

Dennis.

[ChrisBull]

Best bet would be JavaScript, offers you far more functionality. You might be able to do it with css3 but i’m not familiar with it (still use css2). Anyway not all browsers support css3 (not all users have JavaScript enabled) so your unlikely to get it working for everyone.

Overall, My personal opinion is to use JavaScript.

[yodanski]

Thanks Chris.

[yodanski]

Let me rephrase, just to be sure.

If I were to give each keyboard key a unique ID, can I change say the backgroundcolor of multiple ID’s when I hover over a line of text?

I really don’t know the CSS syntax for that.

[chrisburton]

you could do something like

#a:hover, #s:hover, #d:hover {background: #252525;}

edit: Actually this would only work if you hovered over the id not when you hover random text outside of the element

[yodanski]

Thanks Christopher.

So if I understand correctly, if I had a line of text in an unordered list beneath the Mac keyboard (something like ‘force empty trash’) with a unique ID (li id=forceemptytrash), and that line is hovered over, it’s impossible to trigger changes in multiple ID’s that are assigned to the keyboard’s keys?

Hope I’m making myself clear…

[chrisburton]

Yes it is very possible but what I did above will not work for that. I think for what you’re trying to accomplish, javascript would be pretty helpful

[yodanski]

Christopher,

Okidoki. I’ll look into that – nice challenge!

Cheers.

[chrisburton]

I could be wrong, hopefully someone else can come along for their input

[ChrisBull]

It should be pretty easy with JavaScript (recommend using jquery) as you have all of the buttons with unique id’s. Just create hover functions for the li items that change the css of the buttons.

[DogsGhost]

I’m no jquery pro, but here’s an example of something that works:

Screenshot keybinds


Undo last action




Shift


Command


4


Alt


Z

[yodanski]

Thanks everyone for helping out!

I’ll try it out with jquery.

Cheers!

[whiteInkDesign]

If you have a lot shortcuts you’ll probably want to make an variable array mapping out the relationships. Piggie-backing off DogsGhost your js would look something like this:

[yodanski]

Thanks whiteinkDesign,

So much to learn still…

[Author]

Posts