Я пытаюсь добиться функции hover()
, при которой при наведении одного тега <a>
он также будет стилизовать все остальные теги <a>
в этом теге <tr>
.Я хочу сделать это синхронно друг с другом, когда любой из тегов <a>
в таблице наведен, все они будут синхронизированы со стилем в данной строке таблицы.
Вот jsfiddle:https://jsfiddle.net/o2gxgz9r/73483/
Попытка этого кода с использованием методов closest()
и parent()
, но она не работает:
JS:
$('#table-dropdown a').hover(function(){
//$(this).parent().siblings('a').css('text-decoration', 'underline');
$(this).closest('tr').siblings('a:not(.link)').css('text-decoration', 'underline');
//$(this).parent().siblings('a').css('color', 'red !important');
$(this).closest('tr').siblings('a:not(.link)').css('color', 'red !important');
});
HTML:
<table id="table-dropdown" style="border-collapse:collapse; border-color:initial; border-image:initial; border-width:1px; width:657px">
<tbody>
<tr>
<td style="vertical-align:top; width:64px">
<p><strong>Abbr</strong></p>
</td>
<td style="vertical-align:top; width:585px">
<p><strong>Title</strong></p>
</td>
</tr>
<tr>
<td style="vertical-align:top; width:64px">
<a class="AAA" href="#">AAA</a>
</td>
<td style="vertical-align:top; width:585px">
<a class="AAA" href="#">Heading 1</a>
<a class="link AAA" href="#"><span class="arrow"></span></a>
<p id="AAA" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</td>
</tr>
<tr>
<td style="vertical-align:top; width:64px">
<a href="#">BBB</a>
</td>
<td style="vertical-align:top; width:585px">
<a href="#">Heading 2</a>
<p id="BBB" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</td>
</tr>
<tr>
<td style="vertical-align:top; width:64px">
<a href="#">CCC</a>
</td>
<td style="vertical-align:top; width:585px">
<a href="#">Heading 3</a>
<p id="CCC" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</td>
</tr>
</tbody>
</table>