html
<div class="hidden-nav">
<h4>lorem</h4>
<ul class="decor-menu-list">
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">321</a></li>
<li><a href="#">123</a></li>
</ul>
</div><!-- hidden-nav -->
<aside class="fixed-col">
<div class="fix-wrap cf">
<div class="fixed-col-inner">
<h1>123</h1>
<div class="menu-button">
<a href="#" onclick="return false" class="close-menu"></a>
</div><!-- menu-button -->
<div class="menu-side">
<ul class="second-nav">
<li class="open-hidden-nav"><a href="#" onclick="return false">SHOW HIDDEN MENU</a></li>
<li><a href="#">7</a></li>
<li><a href="#">6</a></li>
<li><a href="#">5</a></li>
<li><a href="#">4</a></li>
</ul>
</div><!-- menu-side -->
</div><!-- fixed-col-inner -->
</div><!-- fix-wrap -->
</aside><!-- fixed-col -->
<aside class="fixed-col-closed">
<div class="fix-wrap">
<div class="fixed-col-closed-inner">
<div class="menu-button">
<a href="#" onclick="return false" class="open-menu"></a>
</div><!-- menu-button -->
<ul class="closed-fav">
<li class="fav-ico"></li>
<li><a href="#">0</a></li>
</ul>
<ul class="closed-social">
<li class="facebook"><a href="#"></a></li>
<li class="vk"><a href="#"></a></li>
</ul>
</div>
</div><!-- fix-wrap -->
</aside><!-- fixed-col-close -->
<div class="to-top">
<a href="#" class="scrollup">Scroll</a>
</div>
<section class="main-section cf opened-side">
<div class="col">
<article class="item">
<a href="#"><img src="img/img1.jpg" height="286" width="366" alt=""></a>
<h2><a href="#">header text</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus possimus ab adipisci sit tenetur assumenda cupiditate iure modi minus repellat corrupti reiciendis sapiente sunt porro autem temporibus impedit quaerat perspiciatis?</p>
<p>Unde consectetur vitae consequuntur error rerum laborum atque sequi explicabo aut necessitatibus omnis doloremque beatae voluptatum soluta fugiat nulla reiciendis deserunt. Dolore molestiae sint atque labore at quam ducimus itaque?</p>
<p>Architecto facere eius magnam sed quae odit doloribus dicta. Aperiam consectetur magnam reprehenderit quod sint consequuntur quisquam ab delectus tempore in laudantium quis voluptate iure voluptatem minus placeat nulla officiis.</p>
<a href="#" class="read-more">22</a>
<div class="hidden-article-item">
<p class="author"><a href="#">123</a></p>
<p class="like-and-view"><span class="view">12</span> <span class="like">5</span></p>
</div><!-- hidden-article-item -->
</article>
</div>
</section>
I need it so that:
- When user hover in
.open-hidden-nav a- appears dropdown menu, and if hovered.hidden-navit stays visible - When user changes target (anything else instead
.open-hidden-nav aand.hidden-nav) - dropdown menu hold 1s and disappear.
I wrote this jQuery:
$(window).load(function(){
$(".open-hidden-nav a").on("mouseover", function () {
$(".hidden-nav").addClass('open');
});
$(".hidden-nav").on("mouseover", function () {
$(".hidden-nav").addClass('open');
$(".open-hidden-nav").addClass('active');
});
$(".open-hidden-nav a").on("mouseout", function () {
setTimeout( function(){
$('.hidden-nav').removeClass('open');
}, 1000);
});
$(".hidden-nav").on("mouseout", function () {
setTimeout( function(){
$(".hidden-nav").removeClass('open');
$(".open-hidden-nav").removeClass('active');
}, 1000);
});
});
but it does not work correctly, and css transitions are working in mouseover but are not working on mouseout..
One other question - Is it that mouseover and mouseout functions can be used cross browser or on mobile devices such as iPad?
Here is JsFiddle Link, I hope you'll help me)