Question

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

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

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/

Answer 2

下面的CSS实现了您的目标。当你在.module-link上空盘旋时，效果必须发生。您之前的选择器.module-link :hover:after { width: 100%; }仅在您悬停在.module-link的任何子元素上时才应用新宽度。

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

<强> Fiddle: http://jsfiddle.net/jB9WU/5/

添加cursor: pointer;以防止默认光标

.module-link:hover {
   cursor: pointer;
   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 a:after选择器的属性conent:'';无效。我从我更新的小提琴中删除了它。

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

2 个答案: