Hover on “everything but” aka “spotlight” effect: how to make smooth & easy hover transitions?


Tags: css,css3,hover

Problem :

Chris Coyier once posted an article on CSS-Tricks website on how to achieve this effect:

ul:hover li:not(:hover) { opacity: .5; }

But what I'm also trying to achieve is smooth and easy hover transitions. I'm just not sure how or where to insert the "smooth hover transition" part of the code.

a {
  color: #cccccc;
  -webkit-transition: color .5s linear;
  -moz-transition: color .5s linear;
  -ms-transition: color .5s linear;
  -o-transition: color .5s linear;
  transition: color .5s linear;
}

a:hover { color: #000000; }

Please help.



Solution :

You can select a like this ul:hover li:not(:hover) a

ul {
  list-style-type: none;
}
li a {
  transition: all 0.4s linear;
  text-decoration: none;
  color: black;
  font-size: 20px;
}
ul:hover li:not(:hover) a { 
  color: lightblue;
}
<ul>
  <li><a href="">Lorem ipsum dolor.</a></li>
  <li><a href="">Lorem ipsum dolor.</a></li>
  <li><a href="">Lorem ipsum dolor.</a></li>
  <li><a href="">Lorem ipsum dolor.</a></li>
  <li><a href="">Lorem ipsum dolor.</a></li>
</ul>


    CSS Howto..

    How to take an element over to given padding with CSS

    How to target table with ID?

    How do I get a computed style?

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    sidebar is under the openlayers map how to set css

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How do you load the css for a Mediawiki tag extension?

    How to Write CSS Code for Mozilla Firefox Browser

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    How to make the first column of a table invisible?

    how to get text beside image button using CSS

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    jQuery how to add another css in code?

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    What is the ::content pseudo-element and how does it work?

    how to apply transition effect in expand/collapse inside gridview rows

    How can I select the first IFRAME within the second FB tag in a div?

    how to prevent child element from widening parent element's width in css

    How do I do this CSS border-bottom

    HTML/ CSS: A href exceeds linking image - how to avoid?

    How to have anchors to the side of the page? [closed]

    CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
    I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
    Read more

    How to install Firefox “Stylish” css file? [closed]

    How to select the first paragraph in a div with a specific class (CSS 2)

    How to disable
    tags inside
    by css?

    Css Trick - How to align this div

    How can I add a red border to this box (an a tag) when the mouse is on (hover) the box?

    How refresh the style of an HTML element after changing it using Javascript?

    How to have multiple CSS transitions on an element?

    HTML/CSS How to make menu slide up when menu item is clicked?