单击它后不能再悬停div

Question

I'm actually trying to do a menu using CSS and jQuery. 我实际上正在尝试使用CSS和jQuery进行菜单。 It uses images 2 images per button, one for when it's not active and the other for the hover. 每个按钮使用2张图片，一张用于不活动时，另一张用于悬停。 This part is made with the stylesheet. 这部分由样式表组成。 When you click on a li, it take the same style as if the mouse was over. 单击li时，其样式与鼠标悬停时相同。 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). 但是一次只能单击一个li，因此，如果单击另一个（或相同）li，它将撤销另一个（或没有）的前一个li。 This part is done with jquery. 这部分是通过jquery完成的。

My problem is that when I click on a LI and then unselect it, I can no longer hover it. 我的问题是，当我单击一个LI并取消选择它时，我将无法再将其悬停。 I think there is a collision between the CSS applied by jQuery and the style sheet. 我认为jQuery应用的CSS与样式表之间存在冲突。

There is the HTML Part : 有HTML部分：

<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 : 这是CSS部分：

#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 : 最后最好的（令人头疼的）是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. 感谢您的帮助，我欢迎任何建议或解决方案。

Answer 1

jQuery.css() adds inline styling, which will override your external css. jQuery.css()添加了内联样式，这将覆盖您的外部CSS。 Try adding !important on your hover, like this: 尝试在悬停上添加!important ，如下所示：

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

I made an example fiddle . 我做出了表率小提琴。 (click both and then hover) （同时单击并悬停）

单击它后不能再悬停div

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-02 14:15:18

单击它后不能再悬停div

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-02 14:15:18

解决方案1
1 已采纳 2014-11-02 14:15:18