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.
You can use the .hover() function in jQuery.
$( 'element' ).hover( function() { //do what you want to elements here. } );
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...]
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.