Как использовать hover () для стилизации нескольких конкретных элементов? - PullRequest
Новая
       39

Как использовать hover () для стилизации нескольких конкретных элементов?

0 голосов
/ 01 октября 2018

Я пытаюсь добиться функции 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>

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Я вижу, вы уже нашли свой ответ, но это идеальное место для CSS.

CSS: 

#table-dropdown tr:hover a {
    text-decoration:underline;
    color:red;
}

Рабочая демонстрация

0 голосов
/ 01 октября 2018

Спасибо Робину за проницательный ответ.

Рабочий пример: 

$('#table-dropdown a').hover(function(){ // style multiple elements on hover action
    $(this).closest('tr').find('a').css('text-decoration', 'underline');
    $(this).closest('tr').find('a').css('color', 'red');
}, function(){ // hover out
    $(this).closest('tr').find('a').css('text-decoration', 'none');
    $(this).closest('tr').find('a').css('color', 'black');             
});
...