CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CrazyYoshi
CrazyYoshi

Reputation: 1143

Can't hover no more a div after I've clicked on it

I'm actually trying to do a menu using CSS and jQuery. It uses images 2 images per button, one for when it's not active and the other for the hover. This part is made with the stylesheet. When you click on a li, it take the same style as if the mouse was over. But only one li can be clicked at a time so if you click on another(or the same) li it undo the previous one for the other(or none). This part is done with jquery.

My problem is that when I click on a LI and then unselect it, I can no longer hover it. I think there is a collision between the CSS applied by jQuery and the style sheet.

There is the HTML Part : 

<body>
<div id="wrap"><!--Header Menu TagBar -->
    <div id="header"></div>

    <div id="menu">
        <ul>
            <li id="genre"></li>

            <li id="author"></li>

            <li id="home">
                <div id="hmIcon"></div>
            </li>

            <li id="artist"></li>

            <li id="year"></li>
        </ul>
    </div>

This is the CSS Part : 

#menu {
background-color:#fff;
width:1000px;
height:60px;
position:relative;
}

#menu ul {
margin:0;
padding:0;
list-style:none;
overflow: hidden;
}

#menu ul li {
width:200px;
float:left;
list-style:none;
text-align:center;
height:60px;
line-height:60px;
opacity:.9;
}

#menu li:hover {
opacity:1;
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.6);
}

#genre {
background-image:url(../images/genreHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}

#genre:hover {
background-image:url(../images/genre.jpg);
}

#author {
background-image:url(../images/authorHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}

#author:hover {
background-image:url(../images/author.jpg);
}

#hmIcon {
width:100%;
height:100%;
background-image:url(../images/HomeIcon.png);
background-position:center center;
background-size:50px 50px;
background-repeat:no-repeat;
}

#home {
background-image:url(../images/homeHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}

#home:hover {
background-image:url(../images/home.jpg);
}

#artist  {
background-image:url(../images/artistHover.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}

#artist:hover {
background-image:url(../images/artist.jpg);
}

#year {
background-image:url(../images/yearContour.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:200px 60px;
}

#year:hover {
background-image:url(../images/year.jpg);
}

And the best for the last (the headache), the Jquery Part : 

function clouds(cssDiv, otherOpened) {
var Div = "#Cloud_" + cssDiv;
var idButton = "#" + cssDiv;
var h = "200px";
if (otherOpened === null) {
    var clickedImg = "url(./images/" + cssDiv + ".jpg)";
    $(Div).fadeIn(1);
    $(Div).animate({
        height: h,
    }, 600);
    $(idButton).css({
        'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)',
        'background-image': clickedImg
    });
    return Div;
} else {
    var buttonToUnclick = otherOpened.slice(7);
    var buttonToClick = cssDiv;
    var unClickedImg = "url(./images/" + buttonToUnclick + "Hover.jpg)";
    $(otherOpened).animate({
        height: "0",
    }, 600);
    $(otherOpened).fadeOut(1);
    $("#" + buttonToUnclick).css({
        'box-shadow': ' inset 0px 0px 0px rgba(0,0,0,0.45)',
        'background-image': unClickedImg
    });

    if (Div == otherOpened) {
        return null;
    } else {
        var clickedImg = "url(./images/" + buttonToClick + ".jpg)";
        setTimeout(function() {
            $(Div).fadeIn(1);
            $(Div).animate({
                height: h,
            }, 600);
            $("#" + buttonToClick).css({
                'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)',
                'background-image': clickedImg
            });
            console.log(buttonToClick);
            console.log(clickedImg);
        }, 800);
        return Div;
    }
}
}

And its call :

$("#genre").click(function() {
    whichCloudsOn = clouds("genre", whichCloudsOn);

});
$("#artist").click(function() {
    whichCloudsOn = clouds("artist", whichCloudsOn);

});
$("#author").click(function() {
    whichCloudsOn = clouds("author", whichCloudsOn);

});
$("#year").click(function() {
    whichCloudsOn = clouds("year", whichCloudsOn);

});

Thanks for the help, I'm open to any advices or solutions.

Upvotes: 0

Views: 85

Answers (1)

Johan Karlsson
Johan Karlsson

Reputation: 6476

jQuery.css() adds inline styling, which will override your external css. Try adding !important on your hover, like this:

#year:hover {
    background-image:url(../images/year.jpg) !important;
}

I made an example fiddle. (click both and then hover)

Upvotes: 1

Related Questions