单击它后不能再悬停div

Question

我实际上正在尝试使用CSS和jQuery进行菜单。 每个按钮使用2张图片，一张用于不活动时，另一张用于悬停。 这部分由样式表组成。 单击li时，其样式与鼠标悬停时相同。 但是一次只能单击一个li，因此，如果单击另一个（或相同）li，它将撤销另一个（或没有）的前一个li。 这部分是通过jquery完成的。

我的问题是，当我单击一个LI并取消选择它时，我将无法再将其悬停。 我认为jQuery应用的CSS与样式表之间存在冲突。

有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>

这是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);
}

最后最好的（令人头疼的）是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;
    }
}
}

及其调用：

$("#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);

});

感谢您的帮助，我欢迎任何建议或解决方案。

Answer 1

jQuery.css()添加了内联样式，这将覆盖您的外部CSS。 尝试在悬停上添加!important ，如下所示：

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

我做出了表率小提琴。 （同时单击并悬停）

单击它后不能再悬停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