- This topic is empty.
-
AuthorPosts
-
May 1, 2011 at 11:09 am #32560yodanskiMember
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.
May 1, 2011 at 12:14 pm #48139ChrisBullMemberBest 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.
May 1, 2011 at 12:20 pm #48140yodanskiMemberThanks Chris.
May 1, 2011 at 1:16 pm #48143yodanskiMemberLet 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.
May 1, 2011 at 1:21 pm #48144chrisburtonParticipantyou 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
May 1, 2011 at 1:38 pm #48116yodanskiMemberThanks 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…
May 1, 2011 at 2:24 pm #48109chrisburtonParticipantYes 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
May 1, 2011 at 3:16 pm #48090yodanskiMemberChristopher,
Okidoki. I’ll look into that – nice challenge!
Cheers.
May 1, 2011 at 3:49 pm #48084chrisburtonParticipantI could be wrong, hopefully someone else can come along for their input
May 1, 2011 at 4:02 pm #48082ChrisBullMemberIt 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.
May 1, 2011 at 5:32 pm #48072DogsGhostMemberI’m no jquery pro, but here’s an example of something that works:
- Screenshot keybinds
- Undo last action
Shift
Command
4
Alt
ZMay 2, 2011 at 2:21 am #48040yodanskiMemberThanks everyone for helping out!
I’ll try it out with jquery.
Cheers!
May 2, 2011 at 12:37 pm #47934whiteInkDesignMemberIf 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:
May 3, 2011 at 2:02 am #47867yodanskiMemberThanks whiteinkDesign,
So much to learn still…
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.