5

ホバーすると行の背景が変わる価格表を作成しました。私がそれを使用している方法のために、私は2つの問題に遭遇しました。

  1. 購入ボタンを保持するために使用している3行のスパンがあります。これは、中央に垂直に配置し、列を左側に配置するためです。!important を使用して、ロールオーバー時に背景を白く保つ必要がありました。修理済み。

  2. 購入ボタンのセルをロールオーバーすると、最初の行が強調表示されます。これは私が望んでいないことです。私はあらゆる種類のことを試し、並べ替えもしましたが、3行のスパンを削除しないと解決策を見つけることができません.

jsfiddle

<table>
<tr>
    <th colspan="3">title text</th>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
    <td class="purchase" rowspan="3">purchase button</td>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
</tr>
<tr>
    <td>amount</td>
    <td class="pricing">price</td>
</tr>
</table>


table{
margin:.5em 0 1em 0;
width:100%;
font-size:15px;
}
table th{
padding:0px 0 10px 5px;
}

table td{
padding:2px 5px;
}

table td.purchase{
text-align:right;
width:150px;
vertical-align:middle;
background:#ffffff !important;
}
table td.pricing{
width:130px;
border-left:5px #ffffff solid;
}
table td.details {
padding:0 35px 0 15px;
}

table tr:hover td
{
background-color: #ebf1f6;
}
4

3 に答える 3

0

最初に頭に浮かんだのは、「pointer-events」 css プロパティを使用することです。しかし、ここで役立つかどうかはわかりません。このリンクを確認してください (利用可能な jsFiddle の例があります)

また、JavaScript コードを使用して必要なロジックを設定することも検討してください。css のみを使用したいということは理解していますが、ここでは js の修正は非常に小さくて明白である可能性があります。

于 2013-01-09T07:26:13.757 に答える
-1

あなたは答えを確認することができます

HTML

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2" scope="row">title text </td>
  </tr>
  <tr>
    <td width="75%" scope="row">
        <table width="100%" border="0" cellspacing="2" cellpadding="2" class="amount_table">
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
          <tr>
            <td>amount</td>
            <td>price</td>
          </tr>
        </table>    
    </td>
    <td width="25%">Purchace</td>
  </tr>
</table>

CSS

.amount_table tr:hover{
  background:gray
}
于 2013-01-09T07:37:07.077 に答える