Изменить класс DIV в ячейке таблицы при наведении на другую ячейку

Question

У меня есть такая таблица

<table class="mytable">

   <tr class"table-row">
     <td class="cell-one">Lorem Ipsum</td>
     <td class="cell-two"><span class="value">dolor sit amet</span></td>
   </tr>

   <tr class"table-row">
     <td class="cell-one">Lorem Ipsum</td>
     <td class="cell-two"><span class="value">dolor sit amet</span></td>
   </tr>

</table>

По умолчанию элемент span во второй ячейке строки не отображается (display: none). Когда есть событие наведения для первой ячейки строки, я хочу, чтобы этот промежуток во второй ячейке строки был видимым.

Я могу добиться этого с помощью события наведения для второй ячейки, используя:

.cell-two:hover .value{
    display: inline-block;
}

Однако я не могу определить, как это сделать для наведения на одну ячейку. Я не уверен, что это можно сделать, используя только CSS.

Я мог бы очень легко сделать это с jQuery, но, поскольку мое приложение использует angularJS (и смешивать их не рекомендуется), я ищу решение angularJS если возможно (или ванильное JS решение невозможно через angularJS). Спасибо

Answer 1

Not sure if this is what you are looking, but this hides/shows the cell with inline HTML/CSS:

<table class="mytable">

   <tr class"table-row">
     <td class="cell-one" onmouseover="this.style.display='none'" onmouseout="this.style.display='block'">Lorem Ipsum</td>
     <td class="cell-two" onmouseover="this.style.display='none'" onmouseout="this.style.display='block'"><span class="value">dolor sit amet</span></td>
   </tr>

   <tr class"table-row">
     <td class="cell-one" onmouseover="this.style.display='none'" onmouseout="this.style.display='block'" >Lorem Ipsum</td>
     <td class="cell-two" onmouseover="this.style.display='none'" onmouseout="this.style.display='block'"><span class="value">dolor sit amet</span></td>
   </tr>

 </table>

 This works locally, not sure why is not working as a Snippet.
 I hope this helps,
 Ramon