Element is Statement Combined With If Statment Not Responding Properly on Hover

Question

Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.

I am only going to include the pertinent pieces of code here because it is a very large piece.

I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).

I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.

What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.

The current if statement I wrote is

if($("a.active").is('.uranus')){
    $('#uranus .infos').hover( 
        function () {
            $("#descriptionsp").fadeIn("2000");
        })
    };

The current script that runs when the site loads that sets up the menus is:

$(window).load(function(){
    var e=$("body"),
        t=$("#universe"),
        n=$("#solar-system"),
        r=function() {
            e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
                $(this).removeClass("hide-UI").addClass("set-speed");

                $(this).dequeue()})
        },
        i=function(e){
            t.removeClass().addClass(e)
        };

    $("#toggle-data").click(function(t){
        e.toggleClass("data-open data-close");
        t.preventDefault()
    });

    $("#toggle-controls").click(function(t){
        e.toggleClass("controls-open controls-close");
        t.preventDefault()
    });

    $("#data a").click(function(e){
        var t=$(this).attr("class");
        n.removeClass().addClass(t);
        $(this).parent().find("a").removeClass("active");
        $(this).addClass("active");
        e.preventDefault()
    });

Really need you help. Thanks in advance!

Answer 1

Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.

First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.

Your logic is very close, but you need to move the if statement inside of the hover function like this:

$('#uranus .infos').hover(
        function () {
            if($("a.active").is('.uranus')){
                $("#descriptionsp").fadeIn("2000");
            }
        });

This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active