You should use the following css:



    .navgroup:hover .navicon {
        background-color: blue;
    } 

It will modify just the navicon anytime you hover anywhere within the navgroup



See this [jsFiddle](http://jsfiddle.net/KyleMit/8SNuJ/)
======

I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:

    <ul id="navbar">
	<li class="navgroup">
		<ul>
			<li class="navicon"><i class="icon-home"></i></li>
			<li class="navname">Home</li>
		</ul>
	</li>
	<li class="navgroup">
		<ul>
			<li class="navicon"><i class="icon-info"></i></li>
			<li class="navname">Information</li>
		</ul>
	</li>
	<li class="navgroup">
		<ul>
			<li class="navicon"><i class="icon-contact"></i></li>
			<li class="navname">Contact</li>
		</ul>
	</li>
    </ul>



Of course everything is `{display:inline}` 

Hover over X or Y to change color of Y only

Found a solution using jQuery's`mouseenter`/`mouseleave`:





    $("*")
        .mouseenter(function(){
            $(this).addClass("hovered");
            $(this).parents(".hovered").removeClass("hovered"); 
        })
        .mouseleave(function(){
            $(this).removeClass("hovered");
            $(this).closest(":hover").addClass("hovered");
         });



    .hovered {
        border: 1px solid blue !important;
    }



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div>1  
        <div>1.1 
            <div>1.1.1</div>
            <div>1.1.2</div>
        </div>
        <div>1.2 
            <div>1.2.1</div>
            <div>1.2.2</div>
        </div>
    </div>

I'm trying to recreate something like the chrome developer tools element inspector, wherein I can get the element that's currently being hovered.

I want to add a hover effect to every element on the page sort of like this:



    :hover {
        border: 1px solid blue !important;
    }

But the problem is that it'll show me every single parent element up until that point since they are also being hovered.





    :hover {
      border: 1px solid blue !important;
    }



    <div>1  
        <div>1.1 
            <div>1.1.1</div>
            <div>1.1.2</div>
        </div>
        <div>1.2 
            <div>1.2.1</div>
            <div>1.2.2</div>
        </div>
    </div>



Since there is no parent selector, I can't check to omit elements that have children that have the `:hover` property.  

I can't use `:last-child` as the lowest level element may be a grandchild.

Any ways to style just the child-most element being hovered?

Style childmost hovered element

Here's a strategy that works pretty well, looks nice, and has pretty clean transitions

```css
.spoiler {
    position: relative;
    display: inline-block;
    cursor: help;
}
.spoiler::before {
    content: 'psst\02026'; /* &hellip; */
    position: absolute;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 1px;
    font-size: .9rem;
    color: #e6578c;
    background: #ffe5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 1;
    transition: opacity 0.7s ease, transform 0.3s ease; /* hide faster than reveal */
}
.spoiler:hover::before {
    opacity: 0;
    transform: translateY(-50%)rotateX(80deg);
    transition: opacity 1.0s ease, transform 0.5s ease; /* slower reveal */
}
```

If you style the parent block with `opacity: 0` without hover, then you can't add any styles to illustrate what part of the page the user should be hovering over.

Instead, if we add a `::before` element that covers up the child content, then we can fade it out on hover and still provide a visual indication of where to go.


### Demo in Stack Snippets

[![Spoiler Demo][1]][1]





    .spoiler {
        position: relative;
        display: inline-block;
        cursor: help;
    }
    .spoiler::before {
        content: 'psst\02026'; /* &hellip; */
        position: absolute;
        left: -2px;
        top: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 1px;
        font-size: .9rem;
        color: #e6578c;
        background: #ffe5e5;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: opacity 0.7s ease, transform 0.3s ease; /* hide faster than reveal */
    }
    .spoiler:hover::before {
        opacity: 0;
        transform: translateY(-50%)rotateX(80deg);
        transition: opacity 1.0s ease, transform 0.5s ease; /* slower reveal */
    }




    /* demo styles */
    blockquote {
      margin: 0
    }



    <p>
      Inline Spoiler <span class="spoiler" > Word </span>
    </p>

    <p class="spoiler">
      Paragraph Text Block of a Spoiler
    </p>

    <blockquote class="spoiler">
      Block quote spoiler with super long text that wraps and wraps and wraps some more.
      
      Block quote spoiler with super long text that wraps and wraps and wraps some more.
      
      Block quote spoiler with super long text that wraps and wraps and wraps some more.
    </blockquote>




  [1]: https://i.stack.imgur.com/2f5so.gif

I have a `blockquote` like this:

    <blockquote class="spoiler">Soopah sekkrit!</blockquote>

I want to make it hidden, only showing it if the user hovers over it. I'm doing it now with JS:

    blockquote.addEventListener('mouseover', function() {
        this.style.height = this.offsetHeight + 'px';
        this.dataset.contents = this.innerHTML;
        this.innerHTML = '';
    });
    blockquote.addEventListener('mouseout', function() {
        this.style.height = '';
        this.innerHTML = this.dataset.contents;
    });

Is there a better way to do this, with CSS?

It has to keep its `background-color`, size, and work for contents with custom colors. If possible, I'd also like to animate it so the contents fade in gradually.