：第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时，我还没有将图像封装在锚标记中。