Changing Background color, Logo, and Text Color on a Hover Over... Is this possible with CSS alone?

Question

Warning: I've been studying for a couple years now but was never taught best practices and tend to just go with what I find works, I apologize in advance. This is also my first post, so any helpful recommendations on how to post would be greatly appreciated.

The conundrum I'm trying to solve is how to change 3 variables, the background color, the logo image, and the text color below the logo, on a hover over of the logo with CSS.

I understand how to change for instance: logo image A --> logo image B on a hover over

However, I have no idea on how to change multiple elements with a single hover action and I'm curious if this can be done.

Here is where I'm at so far:

<div class="alphawrapper">
<div class="wrapper" >
<div class="wrapper-inner">

<div id="alogo">
<a href="http://www.vimeo.com/user18299669">
<img src="splashlogo.png" alt="Orange Fishgrenade Logo"> </a>
<a href="/contact.html">            
<h1 id="atext"> FG! </h1> </a>   
</div>

<div id="blogo">
<a href="http://www.vimeo.com/user18299669">
<img src="splashlink.png" alt="White Fishgrenade Logo"> </a>
<a href="/contact.html">
<h1 id="btext"> FG! </h1> </a> 
</div>

</div>
</div>
</div>

.alphawrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
text-transform: uppercase;
text-align: center;
text-rendering: optimizeLegibility; 
}

.wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #ff6600;
text-transform: uppercase;
text-align: center;
text-rendering: optimizeLegibility;
}

.logo a:hover {
}

.wrapper-inner {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
    margin-top: 15%;
}

.wrapper:before {
    content: '';
    margin-right: -15.25em;
}

#alogo {
    position:absolute;
    z-index: 2;
}

#atext {
    font-size: 40px;
    line-height: 1;
    font-family: futura bold,Helvetica,Arial,sans-serif;
    margin-bottom: 0;
    color: #ffffff; 
    z-index: 2;
}

#blogo {
    position: absolute;
    z-index: 1;
}

#btext {
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-family: Helvetica,Arial,sans-serif;
    margin-bottom: 0;
    color: #ff6600; 
    z-index: 1;
}

So the idea is that you hover over the logo and it changes from image 1 to image 2 in essence. However, I seriously have no idea how to change 3 separate element and everything I am trying in .logo a:hover {} doesn't even get close to that, which is why I've left it blank.

My logic here is that I created an .alphawrapper, that is white, that sits below the secondary .wrapper that is orange.

I layered the two other elements, the logo and the text on top of one another using z-index. How it would work in my head is the a:hover action would occur, then the orange predominance of .wrapper would be overridden by the white of .alphawrapper, which then somehow the z-index of #blogo and #btext would change to 3 for example and overtake #alogo / #atext.

I'm assuming that somehow I'm over complicating this, don't know the technical term for this, or maybe it just can't be done since I haven't run into any examples or tutorials on this after some time of searching.

Any input would be greatly be appreciate and thank you for reading if you've come this far.