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

Question

我在按钮内有一个嵌入文本的按钮，当将鼠标悬停在按钮上时，我希望它显示图像并更改文本的颜色。

这是我的代码： 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;
}

现在，我只能通过将鼠标悬停在文本上来更改文本的颜色，但是如何通过将鼠标悬停在图像上来更改两个元素呢？ 顺便说一句，使用的图像仅是此发布的一个示例。

Answer 1

尝试更改此：

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

对此：

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

这是演示 。

Answer 2

您可以使用更少的HTML和仅两个类来执行此操作：

<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;
}

演示版