0

イメージ タグに id を指定したため、オン ホバー機能に CSS でコンテンツ タグを使用しました。これへのリンクは次のとおりです：thunderstorm999.byethost9.com

#explore:hover {
    content: url('images/explore-hover.png');
}
#material:hover {
    content: url('images/material-hover.png');
}
#team:hover {
    content: url('images/team-hover.png');
}
#contact:hover {
    content: url('images/contact-hover.png');
}
#merchandise:hover {
    content: url('images/merchandise-hover.png');
}
<ul class="navigation">
<li><a href="#"><img id="explore" src="images\explore.png"/></a></li>
<li><a href="#"><img id="material" src="images\material.png"/></a></li>
<li><a href="#"><img id="team" src="images\team.png"/></a></li>
<li><a href="#"><img id="contact" src="images\contact.png"/></a></li>
<li><a href="#"><img id="merchandise" src="images\merchandise.png"/></a></li>
</ul>

4

1 に答える 1

1

mozillaとw3cによると、cssコンテンツプロパティは、 :beforeおよび:after疑似要素と組み合わせてのみ機能するはずです。したがって、この場合は使用しない方がよいでしょう。代わりにこのようにすることもできます。

<li id="explore">&nbsp</li>

#explore {
background: url('http://thunderstorm999.byethost9.com/images/explore.png') center no-repeat;
}

#explore:hover {
background: url('http://thunderstorm999.byethost9.com/images/explore-hover.png') center no-repeat;
}
于 2015-02-15T09:28:45.020 に答える