Question

我试图将鼠标悬停在一个div上并使其不仅触发我正在盘旋的div的hoverstate而且还在页面上的其他位置触发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上的hoverstate。正如你可以看到这些是在其他div中，所以我想我需要使用Javascript而不仅仅是CSS来定位它。但我不知道该怎么做。任何帮助都会有用。

Answer 1

您可以在jQuery中使用.hover（）函数。

JSFIDDLE

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

Answer 2

在jQuery中，如果您将.hover()方法应用于$('.details-wrap')，则可以添加一个将效果应用于$('.bottom-details-wrap')的函数：

$(document).ready(function(){

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

});

当鼠标悬停在另一个上时，定位特定div

2 个答案: