![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?c9bd177)
a:hover {色を指定する指示}
という指定で、
hoverしているアンカー行そのものに
色を付けることまでは
出来ています。
しかし、ここで、
hoverされている隣の
hover次行をセレクトしようと
CSSの直接隣接セレクタ(プラス記号)を用いて、
a:hover + a {色を指定する指示}
のように書いてもダメなようでした
しかも、
この方法だと
もし成功しても
hover行の次行なら選べても
hover行の前行を選ぶ手段が
有りませんですしね。
なので
hoverされた行の
前の行も
次の行も
選ぶことを可能にするには、
一旦
hoverしている当該行が
リスト内の何番目かをしめす数値
li:nth-child(数値)
の数値を何らかの手段で取得して
その
数値-1
数値+1
を用いた何らかの指定方法で
hover行の、前行・次行
をセレクトするような
セレクタを書かねば
駄目なのかな??
と思っています。
これってCSSで出来ますでしょうか
それか
CSSにjavascriptを併用して
やっと可能でしょうか
どんなコード(スクリプト)
になりますでしょう
どなたか是非
御指南くださいませ。
よろしくお願い致します。
No.4ベストアンサー
- 回答日時:
ごく簡単なサンプルを。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
でチェック済みのHTML5+CSS3です。必ず試してください。
★タブは_に置換してあるので戻す。
★リキッドでデザインされています。
HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
_<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4{margin:0;line-height:1.6em;}
header,section,footer{
_width:90%;
_max-width:1000px;margin:0 auto;
_position:relative;
}
header nav{
_position:absolute;
_top:100%;
_left:10px;
_width:160px;
_z-index:100;
}
header nav ul,header nav ul li{
_text-align:center;
_list-style:none;
_margin:0;padding:0;
_line-height:30px;
_position:relative;
}
header nav ul,header nav ul li{
_margin-top:5px;
}
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{
_height:30px;
_width:100%;
_border:2px outset gray;
}
header nav ul li:hover{
_background-color:lime;
_position:relative;
}
header nav ul li+li:hover:before{
_content:"\A";
_display:block;
_width:100%;
_height:100%;
_position:absolute;
_top:-39px;
_left:0;
_z-index:5;
}
section h2,section p,section section{
_margin:0 180px;
}
section{min-height:300px;}
section section p,section section section{
_margin:0 10px;min-height:0;
}
section aside{
_position:absolute;
_top:0;right:0;
_width:160px;
_height:100%;
}
/* 色づけ */
header{background-color:rgb(200,255,255);}
section,header nav{background-color:silver;}
section section{background-color:white;}
section aside{background-color:fuchsia;}
footer{background-color:rgb(255,255,160);}
header nav ul li{background-color:white;}
header nav ul li:hover{background-color:lime;}
header nav ul li:hover+li{background-color:yellow;}
header nav ul li+li:hover:before{background-color:aqua;}
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<nav>
___<ul>
____<li><a href="/Some">Some</a></li>
____<li><a href="/nav">navigation</a></li>
____<li><a href="/Products">Products</a></li>
____<li><a href="/Books">Books</a></li>
____<li><a href="/Links">links</a></li>
___</ul>
__</nav>
_</header>
_<section>
__<h2>A smaller heading</h2>
__<p>
___記事色々
__</p>
__<section>
___<h3>見出し</h3>
___<p>
____記事・・・・・
___</p>
__</section>
__<aside>
___<h3>Something aside</h3>
__</aside>
_</section>
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
大変有難いです!!。
すごく分かり易いサンプルです。
とても勉強になります。
これを参考に自分のスクリプトを変更してみて
色々試み、理解が進みました。
例えば、同じく次行の色を変えるにしても、
・隣接セレクタ(+)を使う方法では、実際の次行そのものに対するアクセスを試みている。
・疑似要素(:after)を使う方法では、実際の次行よりも手前にもう一行ダミーコンテンツが挿入され、挿入されたものを位置調整して、本来の次行の上へ重ねて配置してやる。
という感じで、
それぞれ
動作原理というか挙動が違うんですね!!
助かりました。
No.7
- 回答日時:
まあ、結論だけ言うと
>リスト<li>の、アンカー行<a>の、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;}
たったこれだけ・・
いえいえ、
「結論はこれだけ」でも
そこに至る間で
すごく多くの事を学ばせていただけました。
ただただ感謝です。
で、
ベストアンサーに選ばせて頂こうと思います。
本当はNo.7までの
一連の回答群をもってベストアンサーとしたいところ
なのですが
教えてgooの仕様上
一件の回答を選ばざるを得ないので、
一件だけならばコレかな、ということで
「ごく簡単なサンプルを・・・」と
解決策のサンプルコードをご提示いただいた
回答No.4を
ベストアンサーにしたいと思います。
それでは。
No.6
- 回答日時:
:after/:before(擬似要素)と、+隣接セレクタの違い
★必ずDOMを念頭において考えること
html
|-- body
|-- header
|-- nav
|-- ul
|-- li 隣接する要素は次のli
| |-- a 隣接する要素なし
|-- li
| |-- :before
| | li:before{content}で追加されるのはliの内容
| |-- a
★今は、出来上がったものがブラウザChromeとIE11とで動き・見え方 が異なってしまう問題
原因は、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を正しく指定するとブラウザ間の差は原則なくなるはずです。
先のコードに
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
を<head></head>内に追加するとIE8以降ならOKになりますよ。
>あ、私が素人だからで
これを口実にした時点で敗者です。
(厳しいですが、口が裂けても言わないように)
インターネットの世界は、初心者プロの差別はありません。自由で平等な世界です。たまたま、その分野を知っているか、いないかの差
私がこの世界に入った当時、このような親切な世界はなくてメーリングリストやニュースグループが情報を手に入れる手段でした。下手なこと聞くと、『Man!』と帰って来たものです。マニュアルを読め!マニュアルに書いてあることは聞くな!!と言う意味。それが励みにもなりました。
私は、HTMLもCSSもまず仕様書を徹底的に読み解くことから始めます。いっさい他人のコードは参考にしません。
それから自分で書いてみて分からないところをネットで探す。
HTMLやCSSを身につけるのに何ヶ月もかけるのは無駄です。
これが逆だと、とんでもない回り道をすることになるし、多くの場合、間違った知識のままになります。仕様書を理解してからのほうが断然早いし、効率的で、這い上がれない沢に落ちることもない。理系科目の勉強方法と同じですね。
有難うございます。
お手数をおかけし、
恐縮です。
ご指摘いただき、
自分の”迂闊”さが、よく分かりました。
物事をもっと、よく見、よく眺め、それで考えることが
第一歩だな、と感じました。
--------------------
>★必ずDOMを念頭において・・・云々
↓
この、ツリー図を眺めてみて、
はじめて
ああ<a>要素には、隣接する要素は無いんだ!!
という点に気付きました。
これに自力で気付けるように
なりたいものです。
--------------------
>「Another HTML-lint 」・・・の件
↓
これも、お恥ずかしい見落としなのですが
最初
自分のローカルPC上のhtmlファイルをチェックしようと
URL入力欄に、http://のかわりにfile:///で始まる
ローカルファイル名を入れて拒否されたので、
出来ないものだと諦めてしまっていたのでした。
ところが、今しがた
よく「Another HTML-lint 」の画面を見て観察したら
URLタブの隣に
FILEタブと
DATAタブが有って
あっさりFILEタブのところで解決しました。
とても細かな添削が受けられて、感動しました。
見落としというケアレスミス!
まったくもって”迂闊”!
穴が有ったら入りたいという気分です。
--------------------
>素人・・云々・・口が裂けても言わない・・の件
↓
これからは気を付けたいと思います。
しっかりしませんと
『Man!』(マニュアル読め!)以前に
『Look!』(<目の前をよく>見ろ!)と
返って来てしまいますね。
貴重なご指導をいただきました。
技術的ご指導にとどまらず。
ネットでの学習の心構えを教えていただけましたこと。
御礼申し上げます。
No.5
- 回答日時:
支障は行けど修正
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一切見ずにスタイルシート書いていきます。
かさねがさね、有難うございます。
感謝です。
おかげさまで
ほぼスクリプトが完成しましたが、
今は、出来上がったものが
ブラウザChromeとIE11とで
動き・見え方 が異なってしまう問題と
格闘中です。
色々と難しいものですね。
あ、私が素人だからで
ORUKA1951様のレベルならば
ぜんぜん難しい事はないと思います(^_^;)
ではでは。
No.3
- 回答日時:
CSSで行うなら、簡単に:before(擬似要素)でcontentプロパティを使って背景だけのブロックを追加すれば良いです。
li+li:hoverただし、z-indexプロパティで前後関係の指定を忘れないように。
どうも有り難うございます。
contentで、普通なら文字列などを追加するのを
かわりに、色のついた背景を追加すればどうか
ということですね
すみませんが
>>「背景だけのブロックを追加」の部分を
具体的にどうやればよいのか分かりません
よろしければ
その部分の記述方法を
もうすこし詳しく御指南いただければ嬉しいです。
No.2
- 回答日時:
スタイルシートでは無理そうなので、不足分をスクリプトで
<script>(function(){
function A(a,i){return Array.prototype.slice.call(a, i?i:0)}
function L(e,t){for (;e;e=e.parentElement) if (e.tagName == t) return e; return null}
function N(b){return function(o){if(o) b? o.classList.add('neighbor'): o.classList.remove('neighbor')}}
function F(e){
e.addEventListener('mouseover', function(ev){ var li = L(L(ev.target,'A'),'LI'); if (li) [li.previousElementSibling, li.nextElementSibling].forEach(N(true)); }, false);
e.addEventListener('mouseout', function(ev){A(ev.currentTarget.querySelectorAll('li.neighbor')).forEach(N(false))}, false);
}
addEventListener('DOMContentLoaded', function(){A(document.querySelectorAll('ul.graduationlist')).forEach(F)}, false);
})()</script>
<style>
ul.graduationlist li a[href]:hover { background-color:yellow; }
ul.graduationlist li.neighbor a[href] { background-color:gray; }
</style>
<ul class=graduationlist>
<li><a href="/alpha">alpha</a>
<li><a href="/beta">beta</a>
<li><a href="/gamma">gamma</a>
<li><a href="/delta">delta</a>
</ul>
取り急ぎ、御礼まで
丁寧に解説いただき
どうも有難うございます。
私のJavascriptのレベルより
結構、
高度なコード(←偶然ダジャレになっていました (^^;) )
なので
読み解くのに少々時間がかかりそうです
勉強してみますね!
No.1
- 回答日時:
>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:"すみ";}
とかでしょう。
早速に
どうも有り難うございます。
>a:hoverとaは隣接してません。(^^)
↓
いやはや、これはどうも
隣接している行という意味になってなかったんですね。
ご指示のように書いてみたところ
見事に、hoverの次行の色を
塗り替えられました。
嬉しいです。
これで、
次行だけでなく、
前行にも対応できればもっと嬉しいのですが・・・
そこだけ残念です・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Excel(VBA) 特定の条件に該当する行の値、書式を同じセルにコピ&ペーストしたいです 1 2022/05/21 18:18
- Excel(エクセル) VLOOKUP が機能しない、その原因は何 ? 8 2022/10/19 12:06
- Excel(エクセル) 【Excel】指定した文字列に該当する行を重複しないようにリスト 3 2022/03/30 12:27
- Visual Basic(VBA) 3つのプロシージャをまとめたら実行時エラー発生で対応不能 6 2022/05/17 01:47
- その他(Microsoft Office) マクロVBAについて 1 2022/09/06 18:12
- Excel(エクセル) セルを数式で指定する方法 5 2022/04/13 16:55
- Excel(エクセル) エクセルの数式について教えてください。 2 2023/03/04 09:54
- UNIX・Linux Linuxについて2つ質問したいです。 ① シェルスクリプト名をawk1.shとして、指定されたデー 1 2023/02/03 03:49
- Excel(エクセル) エクセルのマクロについて教えてください。 1 2023/02/21 09:28
- Excel(エクセル) Excelの複数ファイルの複数行を別ファイル1つのシートにVBA、マクロで集約する方法 5 2022/09/13 06:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数行にまたがる括弧を表示し...
-
divタグ内のコンテンツが重なっ...
-
ol要素の番号とリスト項目の離...
-
HTMLで組織図を作成する方法
-
リストマーカーをボックス内に...
-
HTMLのdlとul どちらが正しいと...
-
<table>の高さ固定。情報増加時...
-
navの横並びにsnsアイコンを付...
-
ulタグやliタグの中でbrタグ...
-
アコーディオンメニューがかく...
-
「olタグ」内に「hタグ要素」...
-
左メニューをCSSで固定したい
-
<ul><li></li></ul>にするメリ...
-
HTML5のfooterに見出しを付けて...
-
CSS質問:大手サイトを見ると何...
-
レスポンシブWebデザインでリン...
-
横並びのリストで左端がはみ出る
-
li 長さ指定
-
ページを開いているときのリン...
-
3番目のBoxだけずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報