iOSのSafariだと画像をJavaScript入替で表示されなくなるサンプル
HTML
<p>
<a href="https://iwb.jp/">
<img src="img/off.png" class="img" width="50" height="50">
</a>
</p>
<p>
<a href="https://iwb.jp/" class="sprite"></a>
</p>
JavaScript
$(function() {
$(".img").hover(
function() {
var src = $(this).attr("src");
var temp = src.replace("off.png", "on.png");
$(this).attr("src", temp);
},
function() {
var src = $(this).attr("src");
var temp = src.replace("on.png", "off.png");
$(this).attr("src", temp);
}
);
});
CSS
.sprite {
display: inline-block;
width: 50px;
height: 50px;
background: url(img/off-on.png) no-repeat;
background-size: 50px auto;
}
.sprite:hover {
background-position: left bottom;
}