Effect How to - Respond to hover for Icon with overhead label

Question

We would like to know how to respond to hover for Icon with overhead label.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--from   ww  w.j  av a2s  .  c  o  m-->
<style media="all">
.blogicon {
    width: 70px;
    text-align: center;
    backgrond: red;
    padding-top: 4px;
}

.blogicon a {
    display: block;
    background:url("http://www.java2s.com/style/download.png") no-repeat 50% 100%;
    padding-bottom: 90px;
    color: blue;
    text-decoration: none;
    font-weight: bold;
}

.blogicon a:hover, .blogicon a:focus {
    color: red;
}
</style>

</head>
<body>

<div class="blogicon"><a href="/blog-index.html/">Blog</a></div>

</body>
</html>

The code above is rendered as follows: