1

私はこのHtmlコードを持っています:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

例：<li>4</li>マウスがホバーされている場合 > <li>3</li>&<li>5</li>スタイルを設定...

ex:<li>2</li>マウスがホバーのとき。<li>1</li>スタイル<li>3</li>を設定...

Jqueryを使わずにこれを行うことはできますか? タナクス

4

3 に答える 3

2

純粋なCSSでこれをクラックした可能性があると思います...それには、z-index私が好きではない自然を逆にするためのハックが少し含まれていますが、それは物事を整理します.

理論は次のとおりです。 に固定の高さを設定し、同じ値liを与えます。border-top-width次に、リスト項目を上下に「積み重ね」て、上部の境界線が上の項目の背景であると「ふりをする」ことができます。

十分なガス処理を行って、コードを示しましょう...

JSFiddle: http://jsfiddle.net/gvee/Awjmp/

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

* {
    margin: 0;
    border: 0;
    padding:0;
}
ul {
    width: 200px;
    border: 1px solid black;
    list-style-type: none;
    background-color: #eee;
    margin: 10px;
    overflow: hidden;
    /* stop the first item's border bursting the container */
}
li {
    height: 20px;
    border-top-width: 20px;
    /* li.height */
    border-top-style: solid;
    border-top-color: #eee;
    /* ul.background-color */
    position: relative;
    margin-top: -20px;
    /* -li.height */
}
li:hover {
    background-color: red;
    /* "current" colour */
    border-top-color: yellow;
    /* "previous" colour */
}
li:hover + li {
    background-color: lime;
    /* "next" colour */
}
/* HACK... reverse the natural z-index */
 li:nth-child(9) {
    z-index: 1
}
li:nth-child(8) {
    z-index: 2
}
li:nth-child(7) {
    z-index: 3
}
li:nth-child(6) {
    z-index: 4
}
li:nth-child(5) {
    z-index: 5
}
li:nth-child(4) {
    z-index: 6
}
li:nth-child(3) {
    z-index: 7
}
li:nth-child(2) {
    z-index: 8
}
li:nth-child(1) {
    z-index: 9
}
于 2013-08-13T19:15:13.000 に答える