Когда тд-тэг наведен, я хочу изменить цвет тэ-тэга - PullRequest
Новая
       14

Когда тд-тэг наведен, я хочу изменить цвет тэ-тэга

0 голосов
/ 18 ноября 2018

При наведении td-тега я хочу изменить цвет th-тега.Я попробовал приведенный ниже код, но он не работает. 

    td,th{
      border:solid;
    }
    td:hover~th{
      color:red;
      background:red;
    }
    <table>
      <tr>
        <th><h1>th1</h1></th>
        <th><h1>th2</h1></th></tr>  
      <tr>
        <td><h5>td1.1</h5></td>
        <td><h5>td1.2</h5></td></tr>
      <tr>
        <td>td2.1</td>
        <td>td2.2</td>
      </tr>
    </table>

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Вы не пометили javascript, поэтому при условии, что вам нужно решение только для css, есть этот трюк , но он выделит весь столбец.

(К сожалению, вы можете 't выберите на данный момент предыдущий элемент с помощью CSS, поэтому вам нужно будет использовать javascript, чтобы выбрать только предыдущий <th>. 

table {
  overflow: hidden;
}

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

td, th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}
<table>
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
    <th>th4</th>
  </tr>  
  <tr>
    <td>td1.1</td>
    <td>td1.2</td>        
    <td>td1.3</td>
    <td>td1.4</td>
  </tr>  
  <tr>
    <td>td2.1</td>
    <td>td2.2</td>
    <td>td2.2</td>
    <td>td2.2</td>
  </tr>
</table>
0 голосов
/ 18 ноября 2018

~ для элементов, следующих за текущим элементом. CSS не может выбрать предыдущие или родительские элементы.

С JS вы можете сделать (используя jQuery для простоты) 

$('td')
   .mouseenter(function () {
        $(this).closest('table').find('th').addClass('hovered')
   })
   .mouseleave(function () {
        $('table .hovered').removeClass('hovered')
   })
...