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.

Possible duplicate of [Trigger css hover with JS](http://stackoverflow.com/questions/4347116/trigger-css-hover-with-js) — TheNavigat, Dec 14 '16 at 00:21

Blake Connally · Answer 1 · 2016-12-14T00:34:20.083

1

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

JSFIDDLE

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

edited Dec 14 '16 at 00:34

answered Dec 14 '16 at 00:19

Blake Connally

689
1
4
16

Yeah, I was trying that. But it didn't seem to be doing anything. I am not sure my syntax was right. Do you have an example of correct syntax? – Lazerbrains Dec 14 '16 at 00:21
@Lazerbrains I added a JsFiddle for you so that you can see it working. – Blake Connally Dec 14 '16 at 00:23
Do they need to be "ID"? I am using classes and it doesn't work. – Lazerbrains Dec 14 '16 at 00:30
@Lazerbrains Nope, it can be classes as well. I changed the jsfiddle to classes for you. – Blake Connally Dec 14 '16 at 00:34
Does it have anything to do with the divs i am targeting being inside of other divs? – Lazerbrains Dec 14 '16 at 00:36
@Lazerbrains Post your current javascript code that you're working with so I can better picture your goal. Divs don't affect the selection by class. – Blake Connally Dec 14 '16 at 00:40

score 0 · Answer 2 · answered Dec 14 '16 at 00:22

0

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...]
    });

});

answered Dec 14 '16 at 00:22

Rounin

27,134
9
83
108

1

I used this: '' – Lazerbrains Dec 14 '16 at 00:34
You need to use: `.css('backgroundColor','red')`. – Rounin Dec 14 '16 at 00:37
Good call. Thanks. But still not targeting the div. – Lazerbrains Dec 14 '16 at 00:39

Target a specific div when hovering over another

2 Answers2