Vraag cols, colgroups en css: hover psuedoclass


Ik probeer een tabel te maken om de BMI van een persoon weer te geven.

Als onderdeel hiervan zou ik willen, op: hover, for the <tr>  en  <col> (of <colgroup>) om ook te worden gemarkeerd, zodat de kruising duidelijker zichtbaar is.

Aangezien de tabel zowel metrische als imperiale metingen zal bevatten, hoeft de: hover niet te stoppen bij de cel (vanuit elke richting) en zou in feite een bonus zijn als deze zich van de ene as naar de andere uitstrekt. Ik gebruik ook het stringente doctype XHTML 1.1, als dit een verschil maakt?

Dus ... een voorbeeld (de echte tabel is ... groter), maar dit moet representatief zijn:

<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>

Vraag ik het onmogelijke, moet ik naar JQuery-afdelingen?


30
2018-05-11 16:11


oorsprong


antwoorden:


Hier is een pure CSS-methode zonder Javascript.

ik gebruikte ::before en ::after pseudo-elementen om de rij- en kolommarkering uit te voeren. z-index houdt de markering onder de <tds> voor het geval u klikgebeurtenissen moet afhandelen. position: absolute laat ze de grenzen van de <td>. overflow: hidden op de <table> verbergt de hoogtepuntoverloop.

Het was niet nodig, maar ik heb ook ervoor gekozen om alleen de rij of kolom te selecteren als je in de berichtkoppen bent. De .row en .col klassen zorgen hier voor. Als je het vereenvoudigen wilt, kun je ze verwijderen.

Dit werkt in alle moderne browsers (en degradeert elegant in oudere browsers door niets te doen).

demo: http://jsfiddle.net/ThinkingStiff/rUhCa/

Output:

enter image description here

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>

51
2018-06-24 08:16



Er is een heel goede jQuery-plugin die ik ben tegengekomen hier gevestigd dat doet zo'n goed werk met heel veel voorbeelden. Bij voorkeur zou ik dat gebruiken.


9
2018-05-11 16:24



AFAIK CSS Hovers on TRworden sowieso niet ondersteund in IE, dus op zijn best zal het TR-gedeelte daarvan alleen in Firefox werken.

Nog nooit een gezien :hover werk aan een col / colgroup dus niet zeker of dat mogelijk is ...

Denkt u misschien vast te zitten aan een Javascript-implementatie.

Er is een voorbeeld hier  dat werkt (rijen en kolommen) in Firefox maar opnieuw werkt het gebroken in IE ... cols niet.


4
2018-05-11 16:19



Ik kwam deze nette manier om dit te doen op de schop css-tricks.com Ik bereidde ook een viool voor terwijl ik er niets mee deed, maar je kunt het idee wel krijgen met dezelfde code als die css-trickpagina

// De HTML

<table>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
</table>

// De Js

$(function(){
    $("table").delegate('td','mouseover mouseleave', function(e) {
        if (e.type == 'mouseover') {
          $(this).parent().addClass("hover");
          $("colgroup").eq($(this).index()).addClass("hover");
        }
        else {
          $(this).parent().removeClass("hover");
          $("colgroup").eq($(this).index()).removeClass("hover");
        }
    });
})

Bekijk hier de viool


1
2017-10-16 03:06



Live antwoord (https://jsfiddle.net/craig1123/d7105gLf/)

Er zijn al CSS- en JQuery-antwoorden; ik heb echter een eenvoudig, zuiver JavaScript-antwoord geschreven.

Ik vind eerst alle col en td tags, krijg de kolomindex van elke cel door te doen element.cellIndexen voeg vervolgens een CSS-klasse met een achtergrond toe mouseenter en het verwijderen van het mouseleave.

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));
}

Hier is een viool


0
2018-03-07 21:45