html - 要素にカーソルを合わせると、前/次の要素からスタイルを削除します

Question

例：

http://jsfiddle.net/JUmHG/3

LI の上にマウスを置くと、LI の上/下の境界線が透明になります (背景色に置き換えられます)。

ただし、前の LI の下枠と次の LI の上枠も透明にする必要があります。これは CSS で実行できますか?

Answer 1

前の兄弟を選択することはできませんが、目的の効果を得るためにいくつかのトリックを試すことができます。

このような：

デモ

エッチングされた上部の境界線を模倣するために、最初のアイテムを除くすべてのリストアイテムでちょうどborder-top＆を使用します。inset box-shadow

li{
    border-top: 1px solid #999;
    box-shadow: inset 0 1px 0 #fff;
    padding: 10px;
}    
li:first-child{
    border-top: 0;
    box-shadow: none;
} 

hover次に、現在のアイテムとその直後のアイテムに対してそれを削除します。

li:hover, li:hover + li {
    border-color: transparent;
    box-shadow: none;
}

これは、サポートするすべてのブラウザーbox-shadow（つまり、IE8以前の機能の少ないモバイルブラウザーを除くすべて）で機能します。

IE8でも、指定された絶対位置の疑似要素を使用することで同じ効果を得ることができますtop: 0; left: 0; height: 1px; width: 100%; background: #fff;（IE7でも、疑似要素の代わりに子をリストアイテムに追加することで）。ただし、特に元の方法が正常に機能しなくなるため、やり過ぎだと思います。

Answer 2

私ができる最善のことは次のことでしたが、前のことではありませんでした。

http://jsfiddle.net/JUmHG/4/

上記では+、次の兄弟を選択する CSS セレクターを使用しています。

以前のスタイルを設定するには、 li,JavaScript が必要になる場合があります。

jQuery ソリューションの場合、これはうまくいくかもしれません: http://jsfiddle.net/JUmHG/5/

CSS4 が登場すると (息を止めないでください)、これを行うことができます (件名セレクター):

$li + li:hover,
li:hover,
li:hover + li {
    ...
}

http://www.w3.org/TR/2011/WD-selectors4-20110929/#subject

Answer 3

JQuery:

$('li').hover(function(){
  $(this).prev().addClass('hide'); 
},function(){
  $( 'li').removeClass('hide'); 
});

CSS:

.hide{
   border-color: transparent;
}

デモ