CSS形状和文本悬停更改颜色

Question

I have looked around and cannot find an answer for this, maybe I am just making my code too convoluted.

I have a div that is making up my menu links. The wrapper div will be a link that contains a div for my CCS Circle and a span for my link text:

<div class="menu-item">
    <a href="#">
        <div class="menu-circle"></div>
            <span class="menu-text">Home</span>
        </a>
</div>

I am trying to make it so that when I hover ANYWHERE over the wrapper div it changes the color of the shape AND link. So far I have only been able to manage individual hovers on the shape OR the link.

my CSS is:

.menu-circle {
    width: 60px;
    height: 60px;
    background: black;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin:auto;
}

.menu-text{
    font-family: 'Oswald', sans-serif;
    font-weight:700;
    letter-spacing: .07em;
}

.menu-circle:hover{
    background:#e7e7e7;
}

.menu-text:hover{
    color:#e7e7e7;
}

.menu-item{
    text-align:center;
}

you can see the example here

Answer 1

If you want to change the colors when you hover ANYWHERE on the wrapper div then you must call the hover state on the wrapper dive. Like this:

mean-item:hover .menu-circle {change colors here}

This however would only change the circle when hovering anywhere in the wrapper div (the wrapper being menu-item) So you would need a second hover state for menu-text

mean-item:hover .menu-text {change colors here}

See here for working example:

http://jsfiddle.net/s6jkja5r/

Answer 2

Add this code to your style

menu-circle:hover ~ .menu-text{
    color:#e7e7e7;
}

DEMO

Answer 3

Try this in your css:

.menu-item:hover div, .menu-item:hover span {
    background:#e7e7e7;
    color:#e7e7e7;
}

Answer 4

It was a minor CSS change.

.menu-item:hover .menu-circle {
    background-color: #f4f;
}

.menu-item:hover .menu-text {
    color: #f4f;
}

This fiddle should do exactly what you're trying to achieve: http://jsfiddle.net/9qg3vjm3/10/

Answer 5

Check this fiddle

This changed css will change the background color of the circle div and the text color only while hovering on the circle div..

CSS

.menu-item:hover .menu-circle{
    background:#e7e7e7;
}

.menu-item:hover .menu-text{
    color:#e7e7e7;
}

HTML

<div class="menu-item">
    <a href="#">
       <div class="menu-circle"></div>
       <span class="menu-text">Home</span>
    </a>
</div>