2

私は複数の LI を持つ UL を持っています。これらの li にはテーブルがあります (li ごとに 1 つ)。

mootools を使用して、li をドラッグ可能/ソート可能にします。ただし、JavaScript は問題の一部ではないため、ここでは省略します。

li 全体 (したがって子テーブル) をドラッグ可能にしたくないことを除けば、すべて問題ありません。いわばごく一部。

次に、この方法から「相対的かつ絶対的」にしようとしましたが、liの「ホバー」効果は残っています...したがって、（子）テーブルをホバーすると、（親）liは常に次のように表示されます：ホバー効果. それはすべきではありません！

<ul>
  <li>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td>...</td>
        <td><a href="foobar.html">foobar</a></td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
    </table>
  </li>
</ul>

<style>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
  }
  
  li {
    background-color: red;
    width: 25px;
    height: 25px;
    float: left;
    clear: both;
  }
  
  li:hover {
    background-color: green;
    cursor: move;
  }
  
  li table {
    border: 1px solid #eee;
    width: 850px;
    position: absolute;
  }
</style>

これを適用すると、実際の li が 25x25 であることがわかります。しかし、テーブルにカーソルを合わせると、li が緑色に変わります (ちょうどその 25x25 の部分)...

その 25x25 部分だけがホバーに応答するはずです!

4

2 に答える 2

0

tableの子である にカーソルを合わせると、に対しても疑似クラスliがトリガーされます。:hoverli

解決策は、内部にテーブルを持つすべての li にクラスを適用することです。

<li class="withTable">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>...</td>
            <td><a href="foobar.html">foobar</a></td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </table>
</li>

このルールを CSS に追加します。

li.withTable:hover {
        background-color:transparent;
        cursor:default;
}

明らかに、必要に応じて別の色を設定できます

li.withTable:hover {
        background-color:blue;
        cursor:default;
}
于 2012-07-05T11:08:38.293 に答える
0

問題はマークアップにあります。リスト項目 (li) 内 (の兄弟) にテーブルがあるため、li に適用する効果/スタイリングは、その中のすべてに適用されます。したがって、テーブルの上にカーソルを合わせると、li が緑色に変わるのはなぜですか。

于 2012-07-05T10:51:46.170 に答える