COLS、コルグループとCSS：ホバー擬似クラス

StackOverflow https://stackoverflow.com/questions/848840

  •  21-08-2019
  •  | 
  •  

質問

私は、個人のBMIを表示するには、テーブルを作成しようとしています。

<tr>のとの<col>（または<colgroup>）は交差点がより明らかになるであろするために、また、強調表示されるために、ホバーこの一環として、私が上で、たいと思います。 P> 表メトリックと帝国両方の測定を特色にするように、

、：ホバーは、（任意の方向から）セルで停止する必要はないし、それが他の1つの軸から延びている場合、実際には、ボーナスであろう。これは、違いがあれば、私はまた、XHTML 1.1厳格なDOCTYPEを使用しています！

だから... ...例（実際のテーブルの...より大きい）が、これは、代表的である必要があります：

<script>

tr:hover {background-color: #ffa; }

colgroup:hover,
col:hover {background-color: #ffa; }

</script>

... 

<table>
    <col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup>

    <tr>
        <th></th>
        <th>50kg</th>
        <th>55kg</th>
        <th>60kg</th>
    </tr>

    <tr>
        <td>160cm</td>
        <td>20</td>
        <td>21</td>
        <td>23</td>
    </tr>

    <tr>
        <td>165cm</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
    </tr>

    <tr>
        <td>170cm</td>
        <td>17</td>
        <td>19</td>
        <td>21</td>
    </tr>

</table>

私は不可能を求めています、私はjQueryの-病棟に行く必要があるのですか？

役に立ちましたか？

解決

ここで何Javascriptを使用していない純粋なCSSの方法があります。

Iは、行と列の強調表示を行うこと::beforeと::after擬似要素を使用します。 z-indexは、あなたがイベントをクリックし処理する必要がある場合には<tds>以下の強調表示を保持します。 position: absoluteは、彼らが<td>の境界を残すことができます。 overflow: hidden上<table>は、ハイライトのオーバーフローを隠します。

これは必要ありませんでしたが、私はまた、あなたがヘッダにいるとき、それはちょうど、行または列を選択しました。 .rowと.colクラスは、このの世話をします。あなたは簡素化を希望する場合は、あなたがそれらを削除することができます。

これは、すべての最新ブラウザで動作します（と何もしないことにより、古いブラウザ上で優雅に低下し）ます。

デモ： http://jsfiddle.net/ThinkingStiff/rUhCa/する

出力：

ここに画像の説明を入力します

CSSます：

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '\00a0';  
    height: 100%;
    left: -5000px;
    position: absolute;  
    top: 0;
    width: 10000px;   
    z-index: -1;        
}

td:hover::after,
.col:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

HTMLます：

<table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

他のヒント

私の知る限り、CSSはTR年代に置いたので、せいぜいそのTRの一部のみがFirefoxで動作します、とにかくIEでサポートされていません。

でもそれが可能かどうかわからないので、COL / COLGROUP上:hoverの仕事を見たことがない...

あなたはJavascriptの実装で立ち往生するかもしれないと思う。

は、Firefoxで（行＆colsのを）働くことをここの例 Theresの しかし、再び... IEで壊れcolsのでは動作しません。

ライブ答え（ https://jsfiddle.net/craig1123/d7105gLf/する）

CSSとjQueryの答えはすでにあります。しかし、私は、単純な、純粋なJavaScriptの答えを書かれています。

私は最初、すべてのcolとtdタグを見つけるelement.cellIndexを行うことによって、各セルの列インデックスを取得し、その後、mouseenterとmouseleaveでそれを取り除くの背景にCSSクラスを追加します。

HTML 

<table id='table'>
  <col />
  <col />
  <col />
  <col />
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Birthdate</th>
      <th>Preferred Hat Style</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Abraham Lincoln</td>
      <td>204</td>
      <td>February 12</td>
      <td>Stovepipe</td>
    </tr>
    <tr>
      <td>Winston Churchill</td>
      <td>139</td>
      <td>November 30</td>
      <td>Homburg</td>
    </tr>
    <tr>
      <td>Rob Glazebrook</td>
      <td>32</td>
      <td>August 6</td>
      <td>Flat Cap</td>
    </tr>
  </tbody>
</table>

CSS 

body {
  font: 16px/1.5 Helvetica, Arial, sans-serif;
}

table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}
table th {
  text-align: left;
}
table tr, table col {
  transition: all .3s;
}
table tbody tr:hover {
  background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
  background-color: rgba(0, 140, 203, 0.2);
}
tr, col {
  transition: all .3s;
}
tbody tr:hover {
  background-color: rgba(0,140,203,.2);
}
col.hover {
  background-color: rgba(0,140,203,.2);
}

JS 

const col = table.getElementsByTagName('col');
const td = document.getElementsByTagName('td');

const columnEnter = (i) => col[i].classList.add('hover');
const columnLeave = (i) => col[i].classList.remove('hover');

for (const cell of td) {
    const index = cell.cellIndex;
    cell.addEventListener('mouseenter', columnEnter.bind(this, index));
    cell.addEventListener('mouseleave', columnLeave.bind(this, index));
}

ここではフィドルである

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top