我在按钮内有一个嵌入文本的按钮,当将鼠标悬停在按钮上时,我希望它显示图像并更改文本的颜色。
这是我的代码: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;
}
现在,我只能通过将鼠标悬停在文本上方来更改文本的颜色,但是如何通过将鼠标悬停在图像上来更改两个元素呢?顺便说一句,所使用的图像仅是此发布的一个示例。
您可以使用更少的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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句