trのhoverを一部のセル上でのみ無効にする

Question

###前提・実現したいこと

テーブルの、行に対してリンクを設定したいです。
最終的に行うつもりなのは以下の2点ですが、今回質問させていただきたいのは 1 についてです。

1. hover 時の背景色変更
2. クリック時に javascript を実行 (show-modal)

###発生している問題

最初、tr に対して :hover を設定してみたのですが、
rowspan をしている箇所があり、一部のセルに hover した場合のみ反応させたくありません。
そもそも可能なのだろうかと思っているのですが、何か方法はあるでしょうか…

以下試したCSS (test01, test02)
rowspan している「ドリンク」セルのhoverで一行目を着色したくないです。

<style>
  table { margin-bottom:2em; border-collapse:collapse; }
  td    { border:1px solid #999; padding:0.2rem; }

  /* test01
     trのhoverで、子tdの背景色を変更
     問題点：「ドリンク」セルのhoverで一行目を着色したくない
  */
  .test01 .rowlink-tr:hover .rowlink-td {
      background:yellow;
  }
  /* test02
     tdのhoverで、自身と兄弟tdの背景色を変更
     問題点：弟要素は着色されるが、兄要素が着色されない
  */
  .test02 .rowlink-td:hover,
  .test02 .rowlink-td:hover ~ .rowlink-td {
      background:yellow;
  }
</style>

<!-- test01 -->
<table class="test01">
  <tr class="rowlink-tr">
    <td class="rowlink-td-nohover" rowspan="3">ドリンク</td>
    <td class="rowlink-td">珈琲</td>
    <td class="rowlink-td">210円</td>
    <td class="rowlink-td">おかわり自由</td>
  </tr>
  <tr class="rowlink-tr">
    <td class="rowlink-td">紅茶</td>
    <td class="rowlink-td">240円</td>
    <td class="rowlink-td"></td>
  </tr>
  <tr class="rowlink-tr">
    <td class="rowlink-td">オレンジジュース</td>
    <td class="rowlink-td">230円</td>
    <td class="rowlink-td"></td>
  </tr>
</table>

<!-- test02 -->
<table class="test02">
  <tr class="rowlink-tr">
    <td class="rowlink-td-nohover" rowspan="3">ドリンク</td>
    <td class="rowlink-td">珈琲</td>
    <td class="rowlink-td">210円</td>
    <td class="rowlink-td">おかわり自由</td>
  </tr>
  <tr class="rowlink-tr">
    <td class="rowlink-td">紅茶</td>
    <td class="rowlink-td">240円</td>
    <td class="rowlink-td"></td>
  </tr>
  <tr class="rowlink-tr">
    <td class="rowlink-td">オレンジジュース</td>
    <td class="rowlink-td">230円</td>
    <td class="rowlink-td"></td>
  </tr>
</table>

###試したこと

jQuery で潰せないかと思って一応試したのですが、無理でした。（まあ無理です･･･よね･･･）

$(function() {
    // nohover が指定されているセルでは hover を発生させない（rowspan対応）
    $(".rowlink-td-nohover").on("mouseover mouseenter", function(e) {
        //alert("hoge");
        e.preventDefault();
        return false;
    });
});

###補足情報(言語/FW/ツール等のバージョンなど)
ひとまず IE11, Chrome で動くようにしたいです。

###その他

もうそもそもマウスカーソルを載せた時の着色を、css の :hover ではなく jQuery で処理しないと無理かな、とちょっと思ったのですが、可能であれば極力 css で実現したいです。

それはもう css では無理だよ、というご意見でも良いのでよろしくお願いします。

Answer 1

.rowlink-td-nohover {
    pointer-events: none;
}

これで。

Comments

[sk_3122]

なにこれ！ ってなりました
こんなのあるんですね… 知りませんでした。おおー…
ありがとうございます m(_ _)m

Answer 2

test01とtest02のくみあわせで、どうでしょう。
サンプル

  table { margin-bottom:2em; border-collapse:collapse; }
  td    { border:1px solid #999; padding:0.2rem; }

  .test01 .rowlink-tr:hover .rowlink-td {
      background:yellow;
  } 
/*
// ↓ここ
*/
  .test01 .rowlink-td-nohover:hover ~ .rowlink-td {
      background:inherit;
  }

Comments

[sk_3122]

わー！
.nohover に hover されている場合、.nohover の弟だったら着色を解除するのですね。
思いつきませんでした…
ありがとうございます･･･！ m(_ _)m

[think49]

自分の視野の狭さを痛感させられる回答でした。
カスケード処理は重要ですね…。

Answer 3

rowspanがある場合どうしたいかによりますね
cssだけでは相当厳しいとおもいます
jQueryないしなんらかのjavascriptでできると思うので
具体的な仕様を提示されるとよろしいかと

たとえばrowspanを設定したtdには設定したくないなら

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('.test01 td').on('mouseover mouseout',function(e){
      $(this).closest("tr").find('td:not([rowspan])').css({"background-Color":e.type=="mouseover"?"red":""});
  });
});
</script>

<table border class="test01">
  <tr>
    <td rowspan="3">ドリンク</td>
    <td>珈琲</td>
    <td>210円</td>
    <td>おかわり自由</td>
  </tr>
  <tr>
    <td>紅茶</td>
    <td>240円</td>
    <td></td>
  </tr>
  <tr>
    <td>オレンジジュース</td>
    <td>230円</td>
    <td></td>
  </tr>
</table>

Comments

[sk_3122]

jQuery で設定する版ですね。ありがとうございます。
今回は何とかできそうですが、駄目な場合はやっぱり jQuery で回さないと難しいケースも出てきそうですね…
（そういえば "rowspan が設定されているもの" のセレクタ、知りませんでした。こう書くのですね。メモしておこう…）

ありがとうございました。

Answer 4

私の環境では、質問文のHTML/CSSは IE11, Google Chrome で期待通りに動作するようですが…。

(2017/05/02 13:03追記)

すみません。CSSのコメントを読んで要件が分かりましたのでコードを修正しました。
Selectors Level 4 の :has() が実装されれば、次のように書くことが可能です。

tr:has(td:hover:not([rowspan]))>td:hover:not([rowspan]) {
    background-color: yellow;
}

:has() は実装が整っていない為、JavaScriptを利用したサンプルが下記リンク先です。

• td:hover + :has() - JSFiddle

Re: sk_3122 さん

Comments

[sk_3122]

:has() 使えたら便利ですねー

JavaScript サンプルも！ ありがとうございます。