0

私はアイテムのリストを持っています。ホバーすると、背景が項目ごとに灰色で強調表示されます。また、「X」にカーソルを合わせて背景を赤に変更できるようにしたいと考えています。

ただし、以下のコードでは、各行にカーソルを合わせると、アイテムの背景が「X」の上に表示され、「X」にカーソルを合わせる方法がありません。

コード: http://jsfiddle.net/qhoc/7vtZT/2/

HTML:

<ul>
    <li>
        <a>Long title for Item 1</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 2</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 3</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 4</a>
        <i class=icon></i>
    </li>
    <li>
        <a>Item 5</a>
        <i class=icon></i>
    </li>
</ul>

CSS:

ul {
    border: 1px solid green;
    overflow: hidden;
    padding: 0;
    list-style: none;
    width: 100px;
}

a {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 20px;
    white-space: nowrap;
    width: 80px;
}

a:hover {
    background: gray;
}

.icon {
    display: inline-block;
    float: right;
    margin-top: -20px;
    background: yellow;
}

.icon:before {
    content: "X";
}

.icon:hover:before {
    background: red;
}

質問: CSS を (できれば) 変更して、「X」にカーソルを合わせて背景色を変更し、JS で「クリック可能」にするだけでなく、その行のアイテムの背景をグレーで強調表示する方法を教えてください。

現在、「X」で「クリック」イベントをイベントフックすることはできません。これは、アイテムの下で継続しているためです。

要件:

  1. の幅ulは固定です100px

  2. "X" は各li a要素の同じ行にある必要があり、ulの幅にとどまります

  3. テキストaが長すぎる場合は、「X」の下に入れる必要がありますが、ボックスの外側には表示しないでくださいul。ラップはありません。

  4. 長いテキストで「...」を表示するために、それぞれli aにハードコーディングされた幅があります。ellipsisこの幅は変更できます。

  5. Javascript なし。ハードコーディングされた CSS の位​​置は問題ありませんが、あまり好まれません。

4

3 に答える 3

0

これは、UIがそう考えるのに役立ちます..

a {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 10px;
    white-space: nowrap;
    width: 80px;
    height:15px;
}
于 2013-11-14T05:04:51.050 に答える