how to blur all list-items text except for (this) a:hover


Tags: jquery,css,html5,css3

Problem :

I'm trying to make it so when you hover over a list item the current li pops out and all other list items fade out or blur out slightly. I would prefer all css, would anyone know how to select all the other li's except for current selected in css?

UPDATE
I dont believe this is possible to do in css therefore i'm trying to select it in jquery.

Heres the updated code with my not working jquery script http://jsfiddle.net/xKEHe/42/

reference Hide all but $(this) via :not in jQuery selector



Solution :

You can write like this:

ul:hover > #blah a{
    opacity:0.5;
    text-shadow: 0 0 2px #CACACA;
}
ul > #blah:hover a{
    color:#222;
    opacity:1;
    text-shadow:none;
}

Check this: http://jsfiddle.net/xKEHe/46/


    CSS Howto..

    How to write css fallbacks for vh vw

    How do you use CSS Selectors to select multiple elements? [duplicate]

    How to apply css overflow property on specific content

    How to set a background-color to element which has the same id with anchor of url?

    How to align an iframe horizontally (in the centre of the screen) with CSS?

    How to center div the whole screen page using css

    How to make accessible h1 with logo

    How does gmail preserve copy and pasted web content, maintaining the attached CSS?

    How to vertical center ordered list-navigation

    How to make long Bootstrap dropdown menus vertically scrollable?

    CSS: How to shrink first div in container instead of going outside of container

    How to customize ionic style components (lists and tabs with different shapes)

    Bootstrap - How to keep the natural container layout while fixing the container to the bottom?

    How to apply background color (or custom css class) to column in grid - ExtJs 4?

    How to give a nested HTML table cell a transparent background?

    How to add a ToolTip for an icon inside my CSS file

    how to hover after calling jquery animate()

    how to keep elements in one row in css

    How to save the state of css background-color property change when navigating away from one menu to another

    How to change CSS according time with JavaScript

    How automatically adjust div's width using CSS?

    How to create this material design background (see image below) with CSS?

    How to create dashed radius border just with css?

    How can I specify distance between list items?

    How to make mouse hover not shift background downward? (Beginner CSS)

    My YouTube video wont show in iframe

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How to create a horizontal navigation in HTML/CSS above an image?

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    How much overflow in a DOM element