32103


PC版（Macでのみ確認）Safariにおいて、リンク要素にロールオーバーした際にbodyの背景画像を設定しているんですが表示されず、下記ページの方法を試したんですがそれでも解決されませんでした。  
<http://16deza.com/note/background-image-pcsafari-not-displayed/>

問題の起こっているサイトはこちらになります。  
<http://hyld.jp/>

上記サイトの「PROJECTS」の各種リンクをロールオーバーするとそれぞれに対応した背景画像を表示するようにしており、Chrome、Firefoxでは動作しています（Safari含めすべて最新バージョン）。

以下に該当箇所のコードを示します。

HTML

[code]

    <dl class="clearfix hyld"><dt>2016</dt><dd><h3><a href="https://www.behance.net/gallery/46836523/HYLD" target="_blank">HYLD</a></h3></dd></dl>
    <dl class="clearfix arg"><dt>2014</dt><dd><h3><a href="http://www.allrightgraphics.com/" target="_blank">ALL RIGHT GRAPHICS</a></h3></dd></dl>
    <dl class="clearfix ppl"><dt>2014</dt><dd><h3><a href="http://papierlabo.com/" target="_blank">PAPIER LABO.</a></h3></dd></dl>
    <dl class="clearfix ikr"><dt>2014</dt><dd><h3><a href="http://www.inkaren.com/" target="_blank">Inkaren</a></h3></dd></dl>
    <dl class="clearfix ft4"><dt>2015</dt><dd><h3><a href="http://factory4f.com/" target="_blank">Factory 4F</a></h3></dd></dl>
    <dl class="clearfix aeta"><dt>2016</dt><dd><h3><a href="http://www.aeta.website/" target="_blank">Aeta</a></h3></dd></dl>
    <dl class="clearfix ccl"><dt>2015</dt><dd><h3><a href="http://chacoli.jp/" target="_blank">CHACOLI</a></h3></dd></dl>
    
[/code]

JavaScript（jQueryを用いaタグに対してmouseenterをトリガーに関数を呼び出しています）

[code]

    var prj = $(this).parent().parent().parent().attr('class').split(' ')[1];
    
    switch(prj)
    {
        case 'hyld': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
        case 'arg': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
        case 'ppl': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
        case 'ikr': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
        case 'ft4': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
        case 'aeta': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
        case 'ccl': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
        default: break;
    }
    
[/code]

以上、ご教授いただけますと幸いです。  
どうぞよろしくお願いいたします。


CC BY-SA 3.0
2017-01-24T03:05:22.240
32101
2023-05-06T01:44:38.030
2017-01-24T03:15:07.597
8000
18487
question
javascript jquery css
PC版Safariにおいて背景画像が表示されない


`url(`に対応する`)`閉じ括弧がありません。同じコードをコピペすると見る気が失せてミスを見逃しがちです。

[code]

    var prj = $(this).parent().parent().parent().attr('class').split(' ')[1];
    
    switch(prj)
    {
        case 'hyld':
        case 'arg':
        case 'ppl':
        case 'ikr':
        case 'ft4':
        case 'aeta':
        case 'ccl':
            $('body').css({'background-image': 'url(./img/' + prj + '.png)'});
            break;
    }
    
[/code]

とコードを減らしたり、JavaScriptからは直接スタイルの操作はせず、CSSにあらかじめクラスを定義しておくことでJavaScriptからはクラス操作だけに留めた方がミスを抑えられます。

* * *

時代が変わってCSSだけで表現できるようになりつつあるのでご参考までに。CSSセレクタの[`:has()`](https://developer.mozilla.org/ja/docs/Web/CSS/:has)を使うことで条件付きでスタイルを適用できます。`:has()`はほとんどのブラウザーが対応しており、残るFirefoxも上半期に対応予定だそうです。

JavaScriptによるロジックでなく、CSSによる状態として定義できる点は大きいです。背景画像は用意できないので、背景色で実装例を。

[code]

    body:has(.lightgreen a[href]:hover) {
      background-color: lightgreen;
    }
    body:has(.lightskyblue a[href]:hover) {
      background-color: lightskyblue;
    }
    body:has(.lightpink a[href]:hover) {
      background-color: lightpink;
    }
[/code]

[code]

    <div class="lightgreen"><a href="">lightgreen</a></div>
    <div class="lightskyblue"><a href="">lightskyblue</a></div>
    <div class="lightpink"><a href="">lightpink</a></div>
[/code]


CC BY-SA 4.0
2017-01-24T04:22:01.350
32103
2023-05-06T01:44:38.030
2023-05-06T01:44:38.030
4236
4236
32101
answer