CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectorsjquery-hover
TheAmazingKnight
TheAmazingKnight

Reputation: 2474

How to use the hover() to style multiple specific elements?

I'm trying to achieve a hover() function where when one <a> tag is hovered, it will also style all of the other <a> tags within that <tr> tag. I want to make it in sync with each other when either one of the <a> tag in the table is hovered, they will all be in sync with the style in the given table row.

Here's the jsfiddle: https://jsfiddle.net/o2gxgz9r/73483/

Attempted this code using closest() and parent() methods, but it doesn't work:

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>

Upvotes: 1

Views: 146

Answers (2)

Ibu
Ibu

Reputation: 43850

I see you already found your answer, but this is the perfect place for CSS to shine.

CSS:

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

Working Demo

Upvotes: 3

TheAmazingKnight
TheAmazingKnight

Reputation: 2474

Thanks to Robin for the insightful answer.

Working example: 

$('#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');             
});

Upvotes: 1

Related Questions