Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS – changing multiple ID’s on hover

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #32560
    yodanski
    Member

    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.

    #48139
    ChrisBull
    Member

    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.

    #48140
    yodanski
    Member

    Thanks Chris.

    #48143
    yodanski
    Member

    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.

    #48144
    chrisburton
    Participant

    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

    #48116
    yodanski
    Member

    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…

    #48109
    chrisburton
    Participant

    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

    #48090
    yodanski
    Member

    Christopher,

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

    Cheers.

    #48084
    chrisburton
    Participant

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

    #48082
    ChrisBull
    Member

    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.

    #48072
    DogsGhost
    Member

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







    • Screenshot keybinds

    • Undo last action


    Shift

    Command

    4

    Alt

    Z
    #48040
    yodanski
    Member

    Thanks everyone for helping out!

    I’ll try it out with jquery.

    Cheers!

    #47934

    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:

    #47867
    yodanski
    Member

    Thanks whiteinkDesign,

    So much to learn still…

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.