CSSで、リスト
の、アンカー行の、hover された行の、前行・次行の、色を変えたい

Question

a:hover {色を指定する指示}
という指定で、
hoverしているアンカー行そのものに
色を付けることまでは
出来ています。

しかし、ここで、
hoverされている隣の
hover次行をセレクトしようと
CSSの直接隣接セレクタ（プラス記号）を用いて、
a:hover + a {色を指定する指示}　
のように書いてもダメなようでした
しかも、
この方法だと
もし成功しても
hover行の次行なら選べても
hover行の前行を選ぶ手段が
有りませんですしね。

なので
hoverされた行の
前の行も
次の行も
選ぶことを可能にするには、

一旦
hoverしている当該行が
リスト内の何番目かをしめす数値
li:nth-child(数値)
の数値を何らかの手段で取得して

その
数値－1
数値＋1
を用いた何らかの指定方法で
hover行の、前行・次行
をセレクトするような
セレクタを書かねば
駄目なのかな？？
と思っています。

これってCSSで出来ますでしょうか
それか
CSSにjavascriptを併用して
やっと可能でしょうか

どんなコード（スクリプト）
になりますでしょう

どなたか是非
御指南くださいませ。
よろしくお願い致します。

ORUKA1951 · Accepted Answer

ごく簡単なサンプルを。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済みのHTML5+CSS3です。必ず試してください。 ★タブは＿に置換してあるので戻す。 ★リキッドでデザインされています。　HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。＿＿サンプル＿＿＿＿

＿＿

Your title

＿＿＿

＿

＿＿

A smaller heading

＿＿

＿＿＿記事色々＿＿

＿＿

＿＿＿

見出し

＿＿＿

＿＿＿＿記事・・・・・＿＿＿

＿＿

＿＿＿

＿

ORUKA1951 · Answer

まあ、結論だけ言うと＞リスト

の、アンカー行の、hover された行の、前行・次行の、色を変えたい　のためのCSSは、 header nav ul li{ position:relative; } header nav ul li a{ z-index:100; } header nav ul li+li:hover:before{ content:""; display:block; width:100%;height:100%; position:absolute; top:-39px;left:0; z-index:5; background-color:aqua; } header nav ul li:hover+li{background-color:yellow;} たったこれだけ・・

ORUKA1951 · Answer

:after/:before(擬似要素)と、+隣接セレクタの違い

★必ずDOMを念頭において考えること
html
　|-- body
　　　|-- header
　　　　　|-- nav
　　　　　　　|-- ul
　　　　　　　　　|-- li　隣接する要素は次のli
　　　　　　　　　|　　|-- a　　隣接する要素なし
　　　　　　　　　|-- li
　　　　　　　　　|　　|-- :before
　　　　　　　　　|　　| 　li:before{content}で追加されるのはliの内容
　　　　　　　　　|　　|-- a
★今は、出来上がったものがブラウザＣｈｒｏｍｅとＩＥ11とで動き・見え方　が異なってしまう問題
　原因は、HTMLの間違いです。HTML5では誤まったHTMLを処理してどのようなDOMを作るまで決まっていますが、以前のHTMLはブラウザによってDOMの再構成の方法やスタイルの解釈が異なります。
　ちなみに、私のサンプルは、どのブラウザでも差がないはずです。
・Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　でチェックしてご覧なさいとアドバイスしました。

　ブラウザ間の誤差をなくする最善の方法は、strictで記載し、かつどのブラウザも標準モードで動作するようにすること。(HTML5にはstrict以外ありません)
1999年(16年前)勧告当時から・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
著者
　著者・書き手とは、HTML文書を書いたり生成したりする人あるいはプログラムのことを指す。・・・【中略】・・・。
　HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
[HTML4.01仕様書(邦訳)]( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より
　DOCTYPEスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )

★strictで記載し、DOCTYPEを正しく指定するとブラウザ間の差は原則なくなるはずです。
先のコードに

を<head></head>内に追加するとIE8以降ならＯＫになりますよ。

＞あ、私が素人だからで
　これを口実にした時点で敗者です。
　(厳しいですが、口が裂けても言わないように)
　インターネットの世界は、初心者プロの差別はありません。自由で平等な世界です。たまたま、その分野を知っているか、いないかの差

　私がこの世界に入った当時、このような親切な世界はなくてメーリングリストやニュースグループが情報を手に入れる手段でした。下手なこと聞くと、『Man!』と帰って来たものです。マニュアルを読め!マニュアルに書いてあることは聞くな!!と言う意味。それが励みにもなりました。

　私は、HTMLもCSSもまず仕様書を徹底的に読み解くことから始めます。いっさい他人のコードは参考にしません。
　それから自分で書いてみて分からないところをネットで探す。
　HTMLやCSSを身につけるのに何ヶ月もかけるのは無駄です。

　これが逆だと、とんでもない回り道をすることになるし、多くの場合、間違った知識のままになります。仕様書を理解してからのほうが断然早いし、効率的で、這い上がれない沢に落ちることもない。理系科目の勉強方法と同じですね。

ORUKA1951 · Answer

支障は行けど修正
header nav ul,header nav ul li a{
＿display:block;
＿width:100%;height:100%;
＿text-decoration:none;
＿z-index:100;
＿position:relative;
}
余計なセレクタ書いていた。
header nav ul li a{
＿display:block;
＿width:100%;height:100%;
＿text-decoration:none;
＿z-index:100;
＿position:relative;
}
　出来るだけわかりやすく書いたので難しくはないと思います。
　要は、:before擬似要素でブロックを、その上のa要素の下に滑り込ませれば良いだけの話です。
　最初のli要素だけは、そんなこと起きたら、まずいので御存知の(^^)隣接セレクタ、li+li:hober:beforeにしてあるのが味噌ですかね。

余計な事ですが、HTML5は原則DIV要素は使ってはなりません。また文書構造を示す要素(header,section,footer,nav,aside,article)をはじめとして、きちんとした法則が定められています。どんな内容でどんな要素を入れるべきかとか。
　それにしたがって率直にHTMLをマークアップすると、製作やメンテナンス、スタイルシートの指定も、とても楽になります。HTML見なくてもスラスラとスタイルシートが書けますし、スタイルシートを見るだけでなにを指定しているかわかりますよね。
　例えば・・
header nav ul li+li:hover:before{content:}
　とは、
header要素内の
　nav(igation)要素内の
　　ul(順不同リスト)内のliに
　　　続くli要素に:hoverすると、
　　　　:beforeその前に・・・
　　　　　content:内容の追加

私はHTML一切見ずにスタイルシート書いていきます。

ORUKA1951 · Answer

CSSで行うなら、簡単に:before(擬似要素)でcontentプロパティを使って背景だけのブロックを追加すれば良いです。 li+li:hover
ただし、z-indexプロパティで前後関係の指定を忘れないように。

Ogre7077 · Answer

スタイルシートでは無理そうなので、不足分をスクリプトで

ORUKA1951 · Answer

＞a:hover + a {色を指定する指示}のように書いてもダメなようでした
+は隣接セレクタです。a:hoverとaは隣接してません。(^^)
どうしてもなら、
li:hover a{background-color:yellow;}
li:hover+li a{background-color:red;}
ですかね。
　前は選択できません。

まずそのような期待はありませんので今後もそのようなセレクタは登場しないでしょう。前後は視覚的にわかるので・・
それよりは、
li:hover a{background-color:aqua;}
li:hover+li a{background-color:red;}
li:hover a:visited{background-color:gray;}
li:hover a:visited:after{content:"すみ";}
とかでしょう。

CSSで、リスト<li>の、アンカー行<a>の、hover された行の、前行・次行の、色を変えたい

ごく簡単なサンプルを。

まあ、結論だけ言うと

:after/:before(擬似要素)と、+隣接セレクタの違い

支障は行けど修正

CSSで行うなら、簡単に:before(擬似要素)でcontentプロパティを使って背景だけのブロックを追加すれば良いです。

スタイルシートでは無理そうなので、不足分をスクリプトで

＞a:hover + a {色を指定する指示}のように書いてもダメなようでした

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング