0

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

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

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

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

HTML

<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>

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

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;
}

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

1 件の回答 1

5

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

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;
}

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


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

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

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;
}
<div class="lightgreen"><a href="">lightgreen</a></div>
<div class="lightskyblue"><a href="">lightskyblue</a></div>
<div class="lightpink"><a href="">lightpink</a></div>

1
  • あ、閉じ括弧…!!!修正したところ解決いたしました!!!!!ありがとうございます!!!!!Switch分、そのような書き方ができるんですね、知りませんでした。勉強になります。重ねて御礼申し上げます。 Commented 2017年1月24日 4:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。