CSS:将鼠标悬停在div上,为其中的文本修饰设置动画

Question

我正在尝试创建一个div,当用户将鼠标悬停在其上时,内部链接带有下划线.现在我已经能够让它工作,如果用户将鼠标悬停在链接本身上它创建动画,但我想在将鼠标悬停在div上时触发动画.

这可以用纯css完成吗？或者我需要用Javascript调用它吗？

http://jsfiddle.net/jB9WU/3/

HTML:

 <div class="module-link">
                     <label><a href="job_information.php">Job Information</a></label>
                    <img src="images/project.png"/>
                </div>

CSS

.module-link{
    font-family: futura-medium, Geneva, sans-serif;
    font-size:20px;
    float:left;
    width:108px;
    height:180px;
    margin:20px;
    padding:20px;
    background: #CDCDCD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #b1b1b1;
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
}
.module-link:hover {
       background: #EDEDED;
       -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
}
.module-link label{
    text-align:center;
    font-variant: small-caps;
      left:0;
       right:0;
       margin:auto;
       display: block;
       margin-bottom: 25px;

}
.module-link img{
       left:0;
       right:0;
       margin:auto;
       width:100px;
       display: block;
}
.module-link a{
    text-decoration:none;
    color:#000;
    display:inline;
}
.module-link a:after{
    conent: '';
    content: '';
    display: block;
    border-bottom: 1px solid #000;
    width: 0;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}
.module-link :hover:after { width: 100%; }

Answer 1

将最后一行更改为:

.module-link:hover a:after { width: 100%; }

http://jsfiddle.net/jB9WU/4/