質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

16997閲覧

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

sk_3122

総合スコア1126

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/05/02 03:09

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

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

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

###発生している問題

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

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

html

1<style> 2 table { margin-bottom:2em; border-collapse:collapse; } 3 td { border:1px solid #999; padding:0.2rem; } 4 5 /* test01 6 trのhoverで、子tdの背景色を変更 7 問題点:「ドリンク」セルのhoverで一行目を着色したくない 8 */ 9 .test01 .rowlink-tr:hover .rowlink-td { 10 background:yellow; 11 } 12 /* test02 13 tdのhoverで、自身と兄弟tdの背景色を変更 14 問題点:弟要素は着色されるが、兄要素が着色されない 15 */ 16 .test02 .rowlink-td:hover, 17 .test02 .rowlink-td:hover ~ .rowlink-td { 18 background:yellow; 19 } 20</style> 21 22<!-- test01 --> 23<table class="test01"> 24 <tr class="rowlink-tr"> 25 <td class="rowlink-td-nohover" rowspan="3">ドリンク</td> 26 <td class="rowlink-td">珈琲</td> 27 <td class="rowlink-td">210円</td> 28 <td class="rowlink-td">おかわり自由</td> 29 </tr> 30 <tr class="rowlink-tr"> 31 <td class="rowlink-td">紅茶</td> 32 <td class="rowlink-td">240円</td> 33 <td class="rowlink-td"></td> 34 </tr> 35 <tr class="rowlink-tr"> 36 <td class="rowlink-td">オレンジジュース</td> 37 <td class="rowlink-td">230円</td> 38 <td class="rowlink-td"></td> 39 </tr> 40</table> 41 42<!-- test02 --> 43<table class="test02"> 44 <tr class="rowlink-tr"> 45 <td class="rowlink-td-nohover" rowspan="3">ドリンク</td> 46 <td class="rowlink-td">珈琲</td> 47 <td class="rowlink-td">210円</td> 48 <td class="rowlink-td">おかわり自由</td> 49 </tr> 50 <tr class="rowlink-tr"> 51 <td class="rowlink-td">紅茶</td> 52 <td class="rowlink-td">240円</td> 53 <td class="rowlink-td"></td> 54 </tr> 55 <tr class="rowlink-tr"> 56 <td class="rowlink-td">オレンジジュース</td> 57 <td class="rowlink-td">230円</td> 58 <td class="rowlink-td"></td> 59 </tr> 60</table>

###試したこと

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

javascript

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

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

###その他

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

CSS

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

これで。

投稿2017/05/02 03:33

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sk_3122

2017/05/02 04:29

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

0

ベストアンサー

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

CSS

1 table { margin-bottom:2em; border-collapse:collapse; } 2 td { border:1px solid #999; padding:0.2rem; } 3 4 .test01 .rowlink-tr:hover .rowlink-td { 5 background:yellow; 6 } 7/* 8// ↓ここ 9*/ 10 .test01 .rowlink-td-nohover:hover ~ .rowlink-td { 11 background:inherit; 12 }

投稿2017/05/02 03:35

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sk_3122

2017/05/02 04:35 編集

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

2017/05/02 04:47

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

0

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

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

javascript

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('.test01 td').on('mouseover mouseout',function(e){ 5 $(this).closest("tr").find('td:not([rowspan])').css({"background-Color":e.type=="mouseover"?"red":""}); 6 }); 7}); 8</script> 9 10<table border class="test01"> 11 <tr> 12 <td rowspan="3">ドリンク</td> 13 <td>珈琲</td> 14 <td>210</td> 15 <td>おかわり自由</td> 16 </tr> 17 <tr> 18 <td>紅茶</td> 19 <td>240</td> 20 <td></td> 21 </tr> 22 <tr> 23 <td>オレンジジュース</td> 24 <td>230</td> 25 <td></td> 26 </tr> 27</table> 28

投稿2017/05/02 03:42

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sk_3122

2017/05/02 04:40

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

0

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

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

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

CSS

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

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

Re: sk_3122 さん

投稿2017/05/02 03:28

編集2017/05/02 04:13
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sk_3122

2017/05/02 04:51

:has() 使えたら便利ですねー JavaScript サンプルも! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問