キャプション表示するとa要素が効かなくなる

Question

画像にホバーするとキャプション表示が出てくるようにjqueryで実装したのですがこれをすると画像をクリックするとサイトに飛ぶというa要素が効かなくなります。どうすればよいでしょうか。

<section id="works">
       <h2 class="effect-fade"><img src="images/works.png"></h2>
         <ul class="flexcontainer">
           <li class="flexitem effect-fade">
　　　　　　<a href="http://サイトアドレス" target="_blank" ><img 　　　　src="images/thum1.png" width="" height="" "></a></li>
           <li class="flexitem effect-fade"><a href="http://サイトアドレス" target="_blank" ><img src="images/thum2.png" width="" height=""  alt=""></a></li>
        </ul>

#works ul li {
  position: relative;
  list-style: none;
}


.flexcontainer div {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(17, 179, 179, .7);
  top:0;
  left:0;
  box-sizing: border-box;
}

.flexcontainer p {
  position: relative;
  top: 10px;
}

$(".flexcontainer li").hover(
    function () {
        $(this).append("<div><p>" + $(this).children("a").children("img").attr("alt") + "</p></div>");
        $(this).children("div").stop().fadeIn(300);

        //キャプションのテキスト位置：１０ｐｘから０ｐｘへ移動
        $(this).children("div").children("p").stop().
            animate({ "top": 0 }, 300);
    },
    function () {
        $(this).children("div").stop().fadeOut(300);

        $(this).children("div").children("p").stop().
            animate({ "top": "10px" }, 300, function () {
                $(this).parent("div").remove();
            }); //アニメーション事後処理
       } //マウスアウト時の処理
    );

Comments

[m.ts10806]

aのクリックイベントは拾えますか？

[Dragon131]

イベントは拾えています。

[m.ts10806]

aのクリックイベントですよね
提示されてないコードの中で試されたということですよね、
クリック拾えるならそこからhrefの値とって別ウィンドウ開くのでとりあえず対応はダメですか？

[shinoharat]

直接関係ないかもしれませんが、thum1.png の img タグのダブルクォーテーションが一つ多いみたいです。

誤: <img src="images/thum1.png" width="" height="" ">
正: <img src="images/thum1.png" width="" height="">

Answer 1

キャプション用の div が a 要素を隠すような形で手前に配置されるので、その後ろにクリックイベントが飛んでない状態ですかね。

キャプションの css に pointer-events: none を追加すれば、キャプションに対するクリックが無効になる（＝その裏にある a をクリックできるようになる）はずです。

.flexcontainer div {

  ...中略...

  pointer-events: none;
}

--

以下 pointer-events - css | MDN より引用

値を none に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

Comments

[Dragon131]

なるほど！ありがとうございました。冒頭の$(".flexcontainer li")を$(".flexcontainer a")に変えてもうまくいきましたがまずいでしょうか。

[shinoharat]

その方法でも、確かにうまくいきますね。
細かい挙動の違いにこだわらないなら、それでもいいんじゃないかなと思います。

以下、li + pointer-events と a で何が違うのかまとめましたので、参考にどうぞ。

--

【解説: なぜ a に変えてもうまくいくのか？】

$(".flexcontainer a") に変えるとキャプションの挿入先が a の内側に変わります。

```
イメージ:
<a ...>
<img ... />
<div>キャプション</div>
</a>
```

そのため、「キャプションもリンクの一部」と認識され、キャプションをクリックした場合もリンク先に飛べるようになります。

【li と a でどんな違いがあるのか？】

hover のトリガーが li から a に変わったことで、javascript が反応する範囲が少し変わる可能性があります。

hover の対象が li の場合は、画像に直接ポインタを重ねなくても、画像と同じ横軸にマウスポインタ持っていくだけでキャプションが表示されていたはずです。
一方、a に変えた後は、画像に直接マウスポインタを重ねた場合だけ、キャプションが表示されるようになります。
（css の状態にもよるため、必ず質問者さんの手元で同じ現象が起きるとは限りませんが）

「その程度の違いならどうでもいい」とか「むしろ画像に直接マウスポインタを重ねた場合だけキャプションが表示の方がいい」とかなら、a に変えちゃっていいと思います。

[Dragon131]

微妙な違いがあるのですね。勉強になります。今回はpointer-events: none;を使いました。