&：nth-of-type() 选择器悬停内容 (1) 适用于所有类型

Question

问题

当悬停所有链接图像时，&:nth-of-type(1):hover content: '.png'将接管。

我试着把它们完全从巢中移除，但似乎什么都不起作用。

有什么想法吗？

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

*facepalm

好吧，我解决了。

当我最初编写CSS时，我还没有将图像包装在锚标记中。