CSS Quick Tip: Sibling hover fade out

Here’s a quick example for you to play with.

  • Richard Lewis

    Explained excellently and I will be using this on current project, thanks Ben

  • Shane Griffiths

    Nice work buddy. Very clear and easy to follow :)

  • TobyHowarth

    Nice one mate, really easy to understand and nice clean code to look at :)

  • Great tip Ben. It’s also possible to do this using the :not selector as you can see in this JSFiddle: http://jsfiddle.net/YTLCQ/2/, although that won’t work in IE8 and below.

  • Good little tip, Ben. Thanks for sharing this one :)

  • Neat!

  • brettof86

    Great solution. I have always used jQuery for things like this but lately I’ve been trying to use CSS where possible. Thanks for the tip!

  • Just trying to achieve something a little funky using this technique: http://jsbin.com/onoHube/3/edit

    Can’t seem to stop white space appearing on right-hand side if you hover across items quickly though…

    • beneverard

      Hi Keir,

      When you quickly hover over all items but end up hovering on item four, the first three items are gradually returning to their smaller, non-hover state widths. However, with three items getting smaller but only one getting larger, the gap is opening up three times faster than the fourth item can close it up (by expanding to it’s hover state width).

      This is, until the three smaller items have returned to their correct non-hover widths, then the fourth item fills the gap appropriately.

      You could try using a background colour on the ul element to make it the whitespace look less obvious… but even this won’t fully solve the problem. Would be interested to see what solution could be used here.

      • Hey Ben – man, you have a supreme way of describing issues – that really helps.

        I’m going to fiddle with animation speeds and/or break out the JS. Would be lovely not to have to use JS at all though!

        Thanks for the inspiration and I’ll pop a note with the solution (if any) we go with.

      • Seems like simply moving the class assignment (and subsequent animation) to jQuery fixes the issue: http://jsbin.com/onoHube/5/edit

        jQuery hover must work slightly differently to :hover in some way?

      • Ha, that is neat. Visually much better, thank!