：第n的類型（）選擇懸停內容（1）適用於所有-的型

Question

的問題

的&:nth-of-type(1):hover content: '.png'盤旋ALL鏈路圖像時接管。

我已經嘗試從嵌套完全刪除它們，但似乎沒有任何工作。

有什麼想法？

的HTML.ERB

<div class="col-md-12 social-container"> 
    <%= link_to "#{image_tag('google-inverse.png', class: 'google', 'data-text': 'Google')}".html_safe, 'https://www.' %> 
    <%= link_to "#{image_tag('social-1.png', class: 'twitter', 'data-text': 'Twitter')}".html_safe, 'https://www.' %> 
    <%= link_to "#{image_tag('social-2.png', class: 'linkedin', 'data-text': 'LinkedIn')}".html_safe, 'https://www.' %> 
    <%= link_to "#{image_tag('social-3.png', class: 'github', 'data-text': 'Github')}".html_safe, 'https://www.' %> 
</div> 

的CSS

.social-container { 
    width: 100% !important; 
    margin: 22px 0; 
    height: 40px; 
    @include tablet { 
     text-align: center; 
    } 
    img { 
     border: 1px solid $yellow; 
     background-color: rgba(0, 0, 0, 0.2); 
     margin: 0 4px; 
     width: 40px; 
     box-sizing: border-box; 
     padding: 11px; 
     float: left; 
     &:hover { 
     background-color: $yellow; 
     display: block; 
     } 
     &:nth-of-type(1):hover { 
     content: image_url('google-plus-logo.png') 
     } 
     &:nth-of-type(2):hover { 
     content: image_url('twitter-logo-silhouette.png') 
     } 
     &:nth-of-type(3):hover { 
     content: image_url('linkedin-logo.png') 
     } 
     &:nth-of-type(4):hover { 
     content: image_url('github-logo.png') 
     } 
    } 
    } 

Answer 1

*捂臉

好了，所以我解決它。

當我最初編寫CSS時，我還沒有將圖像封裝在錨標記中。