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()添加了内联样式，这将override您的外部CSS。尝试在悬停时添加!important，如下所示：

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

我做了一个例子fiddle。（单击两个然后悬停）

在我点击它之后，不能再徘徊

1 个答案: