javascript - 将鼠标悬停在另一个 div 上时定位特定 div

Question

我试图将鼠标悬停在一个 div 上，并使其不仅触发我悬停在其上的 div 的悬停状态，而且还触发页面上其他地方的 div。我怎样才能做到这一点。使用 JavaScript 或 JQuery 就可以了。我的代码如下所示:

<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>

我希望翻转具有“details-wrap”类的 div，并在具有“bottom-details-wrap”类的 div 上触发悬停状态。正如你所看到的，它们位于其他 div 内部，所以我想我需要使用 Javascript 而不仅仅是 CSS 来定位它。但我不知道该怎么做。任何帮助都会有用的。

Answer 1

您可以在 jQuery 中使用 .hover() 函数。

JSFIDDLE

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