CSS：將光標懸停在div上，以便在

之間生成動畫文本修飾我試圖創建一個div，當用戶將鼠標懸停在其上時，其內部的鏈接帶下劃線。現在我已經能夠使它工作，如果用戶懸停在鏈接本身上，它會創建動畫，但是我想在懸停在div上時觸發動畫。CSS：將光標懸停在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%; }

來源

2014-06-27 Owen

更改，最後一行：

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

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

來源

2014-06-27 21:13:43

工作就像一個漂亮！謝謝泡沫 – Owen

下面的CSS實現了你正在尋找的東西。當你徘徊在.module-link上時，效果不得不發生。只有當您懸停在.module-link的任何子元素上時，您的上一個選擇器.module-link :hover:after { width: 100%; }纔會應用新寬度。

.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:'';，這是無效的。我從更新的小提琴中刪除了它。

來源

2014-06-27 21:22:36

CSS：將光標懸停在div上，以便在

回答

相關問題