如何更改图像按钮和嵌入文本的悬停效果？

Question

I have a button with embedded text inside the button and when hovering over the button, I would like it to display the image as well as change the color of the text.

Here is my code: http://jsfiddle.net/2qCY7/

HTML:

<a href="http://www.webpage.com/albums">
<div class="album-button">
<div class="album-text">Photo Albums</div>
</div></a>

CSS:

 .album-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #EC580E;
display:inline-block;
}

.album-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:50px;
margin-top:170px;
}


.album-button:hover {
background-image:url('http://www.photobookgirl.com/blog/wp-content/uploads/2010/06/LargeAssembledAlbumMpix.jpg');
background-size:cover;
background-position:-30px;
-webkit-transition: 400ms;
-moz-transition: 400ms;
-o-transition: 400ms;
-ms-transition: 400ms;
transition: 400ms;
}

.album-text:hover {
  color:#000000;
}

Right now, I can only change the color of the text by hovering over the text, specifically, but how do you change both elements by hovering over the image? BTW, the image used is an example only for this posting.

Answer 1

Try changing this:

.album-text:hover {
  color:#000000;
}

to this:

.album-button:hover .album-text{
  color:#000000;
}

Here's demo .

Answer 2

You can do this with a lot less HTML and only two classes:

<a href="http://www.webpage.com/albums" class="album-button">Photo Albums</a>

CSS:

.album-button {
    width: 230px;
    height: 60px;
    border: 5px solid white;
    overflow: hidden;
    background: #EC580E;
    display:inline-block;
    font-size: 24px;
    color:#FFFFFF;
    text-align:center;
    padding-top:170px;
    text-decoration:none;
}



.album-button:hover {
    background-image:url('http://www.photobookgirl.com/blog/wp-content/uploads/2010/06/LargeAssembledAlbumMpix.jpg');
    background-size:cover;
    background-position:-30px;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -o-transition: 400ms;
    -ms-transition: 400ms;
    transition: 400ms;
    color:#000000;
}

Demo