let's say I have 5 images floated side by side. opacity = 1.00. When I hover over one, I want the remaining four to change their opacity to let's say 0.5. Can I do this with css selectors, or do I have to use javascript? and if so, what approach should I take?

jQuery ..

 

http://davidwalsh.name/dw-content/fade-except-jquery.php

Thanks a lot.. However, it doesn't work on my code structure I guess... Here's what I got (and the javascript code from the tutorial):

 

// HTML
<div id="social-links">
		<a href="http://www.facebook.com" title="Follow us on Facebook!">
			<img src="img/design/logo-facebook.png" alt="Facebook logo" />
		</a>
		<a href="http://www.twitter.com" title="Follow us on Twitter!">
			<img src="img/design/logo-twitter.png" alt="Twitter logo" />
		</a>
		<a href="http://www.youtube.com" title="Follow us on YouTube!">
			<img src="img/design/logo-youtube.png" alt="YouTube logo" />
		</a>
		<a href="http://www.flickr.com" title="Follow us on Flickr!">
			<img src="img/design/logo-flickr.png" alt="Flickr logo" />
		</a>
		<a href="http://www.soundcloud.com" title="Follow us on Soundcloud!">
			<img src="img/design/logo-soundcloud.png" alt="Soundcloud logo" />
		</a>
	</div>

// Javascript
$(document).ready(function() {
			//area 1
			$('#social-links').children().hover(function() {
				$(this).siblings().stop().fadeTo(500,0.5);
			}, function() {
				$(this).siblings().stop().fadeTo(500,1);
			});
		});

Have you included a link in your head to the jQuery library?

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

it can be done in pure CSS, just not with opacity and not in IE6. RGBa and decent browsers would work though.

 

/* CSS */
#social-links:hover a {
   color: rgba(255, 255, 255, 0.5); /* white at 50% opacity */
}

#social-links:hover a:hover {
   color: rbg(255, 255, 255); /* white. RGB is ued for the sake of consistency, rgba() and # would also work */
}

lee grant: yes, the jQuery is included. skateside: didn't work at all, really... color wouldn't work obviously, what selector should I use?

 

edit: I am talking about the social network links at the very top. url: http://www.kristoferselbekk.com/test/ieec

 

edit2: note that my images are linked with anchor tags, which I guess makes stuff a bit different.. I can't get how to make it work tho..

skateside: didn't work at all, really... color wouldn't work obviously, what selector should I use?

Sorry, I didn't realise it was a series of images (guess I should have read the whole of the first post, and properly looked at the markup )

If you wanted to do it with CSS, you could use CSS Sprits then reposition the background on hover. Since that would require a bit of a re-write, I'd recommend sticking to the jQuery solution you've currently got. Seems to be working for me (Firefor 3.6.10 on a Mac)

Strange. Yeah it now works in Firefox, but for some reason, not in either Safari or Chrome. That's kind of strange to me, since I thought js was totally browser independent. Could anyone make me understand this?

try this

change in css

 

#topbar #social-links
{float: left;}

 

to

 

#topbar #social-links a
{float: left;}

mteam, I am genuinely jealous of your depth of knowledge, thank you!