Change span background when hover parent element

Question

I have the following section on my website: http://jsfiddle.net/4jr2r3nq/

I'd like it if I hover over the main button that both the button & full-circle change background colour. As you can see from that example, when I hover over the main shape, only it changes background colour, not the semi-circle part :(

.full-circle {
 border: 2px solid #1588CB;
 height: 35px;
 width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
 position:absolute;
 bottom:-20px;
}

button {
background:#ffffff;
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}

/* overides ... */
.full-circle {
  border-radius: 0 0 30px 30px;
  border-top: none;
  height: 17px;
  background: #FFF;
  left: 50%;
  margin-left: -17px;
  bottom: -19px;
  line-height: 0;
}

button:hover, .full-circle:hover {
    background:red
}

<button>Learn More
    <span class="full-circle">+</span>
</button>

Answer 1

Change your hovering style to this:

button:hover, button:hover > span{
    background:red
}

Answer 2

use this button:hover, button:hover .full-circle {...} and by the way, according to caniuse.com , border-radius does not require vendor prefixes