5
これは、以下のコードを実行するときに最も簡単に理解できます。赤いバーの上にマウスを置いたときに、列と中央の行の両方でホバー状態をトリガーするようにしています。CSSを取得する：重複する兄弟にカーソルを合わせる
私はフレックスに基づいて列を維持し、それらの上に絶対的にバーを配置したいと考えています。
これは可能ですか？
EDIT：
私はマウスが青色にする上にマウスを移動さだけで列をしたいと思います。あいまいさを残して申し訳ありません。スニペットを目的の結果に更新しました。
列は白い線で分けられます。灰色の領域にカーソルを合わせると、列がハイライト表示されます。
ありがとうございました。
.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: 1px solid white;
}
.column:hover {
background: blue;
}
.bar {
position: absolute;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
background: red;
}
.bar:hover {
background: green;
}
.green {
background: green;
}
.blue {
background: blue;
}Hover over the middle of the square. I want the middle column to turn blue and the bar to turn green.
Right now, only the bar turns green.
<div class='root'>
<div class='column'>
</div>
<div class='column'>
</div>
<div class='column'>
</div>
<div class='bar'>
</div>
</div>
Desired result:
<div class='root'>
<div class='column'>
</div>
<div class='column blue'>
</div>
<div class='column'>
</div>
<div class='bar green'>
</div>
</div>最終編集：
私は私のユースケースが何であるかを完全に肉付けバージョンを提供しています。私はCSSがこれを解決できるとは思わないが、私は私の元の質問のために働く答えを受け入れた。あなたが行くあり
function enterColumn() {
document.getElementById('column-status').innerHTML = 'In column'
}
function leaveColumn() {
document.getElementById('column-status').innerHTML = 'Out of column'
}
function enterBar() {
document.getElementById('bar-status').innerHTML = 'In bar'
}
function leaveBar() {
document.getElementById('bar-status').innerHTML = 'Out of bar'
}.root {
width: 100px;
height: 100px;
background: grey;
position: relative;
display: flex;
}
.column {
display: flex;
flex: 1 1 auto;
border-right: 1px solid white;
}
.column:hover {
background: blue;
}
.bar-container {
position: absolute;
left: 0;
right: 0;
top: 33px;
bottom: 33px;
}
.bar {
position: absolute;
top: 0;
bottom: 0;
background: red;
}
.bar:hover {
background: green;
}
.green {
background: green;
}
.blue {
background: blue;
}Hovering over a column or bar should be independent. Right now you can never have the 'In column' and 'In bar' status at the same time :(
<br />
It should scale to support any number of columns and any number of bars (where bars can be absolutely positioned anywhere along the x-axis)
<br />
Javascript events should be called on mouse events for both columns and bars.
<div class='root'>
<div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
</div>
<div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
</div>
<div class='column' onmouseenter='enterColumn();' onmouseleave='leaveColumn()'>
</div>
<div class='bar-container'>
<div class='bar' style='left: 5px; right: 40px' onmouseenter='enterBar();' onmouseleave='leaveBar()'>
</div>
<div class='bar' style='left: 65px; right: 5px' onmouseenter='enterBar();' onmouseleave='leaveBar()'>
</div>
</div>
</div>
<div id='column-status'>
Out of column
</div>
<div id='bar-status'>
Out of bar
</div>
CSSを推移している要素を_where_知る方法がないので、これは可能性が高いだけではCSSが解決しようとするつもりはない以上のものです。 – chazsolo
@chazsolo私はポインタイベントのように動作するポインタイベントのようなものを期待していましたが、それでもまだ：ホバーセレクタとonmouseover javascriptイベントを引き起こしました。私はこれのためにjavascriptを使用しなければならないように見えるようになった。 –