Forums

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:

<style>
div {
	width:100px;
	margin:5px;
	border:3px solid black;
}
.keybinds {border:3px solid red;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script&gt;
<script>
$(function(){
	$("li#screen-shot").hover(function() {
		$("#shift,#command,#four").toggleClass("keybinds");
	});
	$("li#undo").hover(function() {
		$("#alt,#z").toggleClass("keybinds");
	});
});</script>
</head>
<body>
<ul>
<li id="screen-shot">Screenshot keybinds</li>
<li id="undo">Undo last action</li>
</ul>
<div id="shift">Shift</div>
<div id="command">Command</div>
<div id="four">4</div>
<div id="caps>Caps Lock</div>
<div id="alt">Alt</div>
<div id="z">Z</div></body>

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:

<script>
var map = {
	// "shortcut": "keys"
	"li#screen-shot": "#shift,#command,#four",
	"li#undo": "#alt,#z"
};
	$(function (){
		$.each(map, function(shortcut, keys) {
			$(shortcut).hover(function() {
				 $(keys).toggleClass("keybinds");		
			});
		});
	 });</script>

yodanski

Thanks whiteinkDesign,

So much to learn still...

treehouse : what would you like to learn today?

Forums

CSS - changing multiple ID's on hover