0
私は動的に作成されたアイテムのリストを持っています。これらの項目とその情報にマウスを合わせると、ボックスに表示されます(この場合はclass='pic_box'
)。最初は、.pic_box
の背景画像がリストの最初の項目の画像として設定されます。SafariでJqueryの背景画像が機能しない
jqueryを使用して、ボックス内のテキストを変更し、背景イメージを変更します。 ChromeとFirefoxで正常に動作します。 Safariでは、テキストは変更されますが、背景イメージは更新されません。
リスト項目:
<table id='inner_table_6' class='inner_table'>
<tr><td class='table_name'>Test Six Apartments</td></tr>
</table>
<script>jQuery(document).ready(function($) {
$('#inner_table_6').mouseenter(function(){link_enter(6, 'Test Six Apartments', '21', 'test_pic_4.jpg');});
$('#inner_table_6').mouseleave(function(){link_leave(6, 'Test Six Apartments', '21', 'test_pic_4.jpg');});
});
</script>
.pic_box:
<div class="pic_box" style="
background-image:url('images/pictures/6/21/test_pic_4.jpg');
background-repeat: no-repeat;
background-size: cover;">
<span id="pic_box_name">Test Six Apartments</span>
</div>
javascript関数:
var link_enter = function ($id, $apt_name, $pic_id, $pic_name){
$('#pic_box_name').html($apt_name);
$('.pic_box').css('background-image', 'url(images/pictures/'+$id+'/'+$pic_id+'/'+$pic_name);
}
私はSafariが本当にURLの周りにいくつかの引用符を望んでいたので、多分それは思いましただから私はこれを試しました:
$('.pic_box').css('background-image', 'url("images/pictures/'+$id+'/'+$pic_id+'/'+$pic_name+'"');
これはChromeとFirefoxで同じ結果をもたらし、Safariでは動作しませんでした。
ページの読み込み時に最初に背景画像を設定しようとしませんでしたが、どちらも助けにならなかったため、Safariで空白のままになり、ChromeとFirefoxで更新されました。