0
Das Problem
Die &:nth-of-type(1):hover content: '.png' übernimmt bei der Nutzung aller Link-Bilder schweben.&: n-of-type() Selektor schweben Inhalt (1) eignen sich für all-of-Art
Ich habe versucht, sie aus dem Schachteln vollständig zu entfernen, aber nichts scheint zu funktionieren.
Irgendwelche Gedanken?
Die 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>
Die 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')
}
}
}