CODEWITHSUNDEEP
jqueryhtmlcss
ALEXM
ALEXM

Reputation: 87

jquery check if mouse is over element

i have a "kind of" menu i created, that when your mouse is over one element the element get different background and another element shows up. i need both elements go back to the origin state only if the mouse is not over the first element and second element.

how can i check if the mouse is also no over the second element?

this is what i have:

<div class="container header-gallery">
    <ul class="col-sm-2 header-gallery-box">
        <li class="header-gallery-ico-box" data-tabId="tab-a">
            <a href=""><img src="images/gallery-learn.png" class="header-gallery-ico"></a>
        </li>
        <li class="header-gallery-ico-box" data-tabId="tab-b">
            <a href=""><img src="images/gallery-speak.png" class="header-gallery-ico"></a>
        </li>
        <li class="header-gallery-ico-box" data-tabId="tab-c">
            <a href=""><img src="images/gallery-read.png" class="header-gallery-ico"></a>
        </li>
        <li class="header-gallery-ico-box" data-tabId="tab-d">
            <a href=""><img src="images/gallery-write.png" class="header-gallery-ico"></a>
        </li>
    </ul>

    <div class="col-sm-4" style="height:720px; padding:0;" >
        <div id="tab-a" class="header-gallery-tab">
            <h2>Learn</h2>
            <p>
                From Middle English...
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
        <div id="tab-b" class="header-gallery-tab">
            <h2>Speak</h2>
            <p>
                From Middle English speken...
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
        <div id="tab-c" class="header-gallery-tab">
            <h2>Read</h2>
            <p>
                From Middle English reden...
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
        <div id="tab-d" class="header-gallery-tab">
            <h2>Write</h2>
            <p>
                From Middle English
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
    </div> 
    <a href="#section2"><img src="images/downArrow.png" style="width:60px; height:60px; text-align:center; bottom:-30px; position:absolute;"></a>      


$(function(){
    $('.header-gallery-ico-box').on('mouseover',function(){
        var tabId = $(this).attr('data-tabId');
        $(this).css({"background-color":"rgba(0, 0, 0, 0.5)"});
        $('#' + tabId).delay(10).fadeIn(30);
    });
    $('.header-gallery-ico-box').on('mouseleave',function(){
        var tabId = $(this).attr('data-tabId');
        $(this).css({"background-color":"transparent"});
        $('#' + tabId).hide();
    });

});

Upvotes: 1

Views: 3862

Answers (1)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26288

Try this:

if ($('#element:hover').length != 0) {
    // do something
}

use it accordingly

Or use is() like:

var isHovered = $('#elem').is(":hover"); // returns true or false

Upvotes: 5

Related Questions