Target a specific div when hovering over another

Question

I am trying to hover over one div and make it not only trigger the hoverstate for the div I am hovering on but also a div elsewhere on the page. How can I do this. Using JavaScript or JQuery would be fine. Here is what my code looks like:

<div class="wrapper">
                <div class="col-left-3">
                <a href="http://example.com">
                        <div class="details-wrap">
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                </a>
                </div>

                <div class="col-left-3">
                <a href="http://example.com">
                        <div class="details-wrap">
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                </a>
                </div>

                <div class="col-left-3">
                <a href="http://example.com">
                        <div class="details-wrap">
                            <h3>Title</h3>
                            <p>Description</p>
                        </div>
                </a>
                </div>


                <div class="full-width-col">
                <a href="http://example.com">
                        <div class="bottom-details-wrap">
                            <h3>Title</h3>
                            <p>Description</p>
                            <div class="full-width-column-container">

                                <div class="col-left-3-res">
                                    <h3>Col 1 title</h3>
                                    <ul>
                                        <li>List Item</li>  

                                        <li>List Item</li>
                                    </ul>
                                </div>

                                <div class="col-left-3-res">
                                    <h3>Col 2 title</h3>
                                    <ul>
                                        <li>List Item</li>  

                                        <li>List Item</li>
                                    </ul>
                                </div>

                                <div class="col-left-3-res">
                                    <h3>Col 3 title</h3>
                                    <ul>
                                        <li>List Item</li>  

                                        <li>List Item</li>
                                    </ul>
                                </div>


                            </div>
                        </div>
                </a>
                </div>
                </div>

I am looking to rollover the div with the class "details-wrap" and trigger a hoverstate on the div with the class "bottom-details-wrap". As you can see these are inside of other divs, so I am thinking I will need to target it using Javascript not just CSS. But I am not sure how to do that. Any help would be useful.

Answer 1

You can use the .hover() function in jQuery.

JSFIDDLE

$( 'element' ).hover( function() {
        //do what you want to elements here.
    }
);

Answer 2

In jQuery, if you apply the .hover() method to $('.details-wrap') you can then add a function which applies effects to $('.bottom-details-wrap'):

$(document).ready(function(){

    $('.details-wrap').hover(function(){
        $('.bottom-details-wrap') [...rest of function here...]
    });

});