我希望有一个菜单，该菜单在悬停时会变为“活动”，然后在单击时仍保持该活动类，即使鼠标离开但未单击时，该活动类也会被删除。
我尝试了几种选择，但是我不知道哪种选择可行。一开始，我有两个不同的功能，但是当单击时，：hover会随后接管并删除活动的类。
首字母为红色。悬停时，应移至悬停的链接/颜色。 如果未单击，应回到红色。 如果单击，则正文类别应保持被单击的类别。
我在想一个可以做的功能
hover(
change class to hovered item (red/yellow/blue)
)
mouseleaves(
if have been clicked-> do nothing (keep class of hovered item)
if have not been clicked -> revert to initial class
)
https://codepen.io/ifeltblankk/pen/BqWyya
$(document).ready(function() {
var initialClass = $( "body" ).attr('class');
$('.nav.desktop li').hover(
function(){
$( "body").removeClass();
var Hoverclass = $(this).attr('class');
$( "body" ).addClass(Hoverclass);
$(this).click(function () {
});
},
function(){
$( "body").removeClass();
$( "body" ).addClass(initialClass);
$(this).click(function () {
$( "body" ).addClass(initialClass);
});
}
);
}); ul.nav{
position:fixed;
top:20px;
left:50px;
}
.color{
width:20px;
height:20px;
background-color:grey;
position:fixed;
top:0px;
left:10px;
display:block;
}
body.red .color{
background-color:red;
top:30px;
}
body.blue .color{
background-color:blue;
top:50px;
}
body.yellow .color{
background-color:yellow;
top:70px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="red">
<div class="color">
</div>
<ul class="nav desktop">
<li class="red">
Red
</li>
<li class="blue">
Blue
</li>
<li class="yellow">
Yellow
</li> <br><br>
<li>
The idea is <br>
hover(<br>
change body class to hovered item (red/yellow/blue)<br>
)<br>
mouseleaves(<br>
if have been clicked-> do nothing (keep class of hovered item)<br>
if have not been clicked -> revert to initial class<br>
)</li>
</ul>
</body>
答案 0 :(得分：2)
此版本的逻辑在鼠标悬停时应用活动类，并在鼠标悬停时将其删除。这会移动红色。然后，如果您单击li以（取消）选择它，它将切换蓝色以显示是否选择了行。
$(document).ready(function() {
$('.nav.desktop li')
.on('click', function(){
$(this).toggleClass('clicked');
})
.on('mouseenter', function(){
$(this).addClass('active');
})
.on('mouseleave', function(){
$(this).removeClass('active');
});
});.active:not(.clicked) {
background-color: rgb(255, 0, 0);
}
.clicked {
background-color:rgb(0, 0, 255);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav desktop">
<li>
Lien 1
</li>
<li>
Lien 2
</li>
<li>
Lien 3
</li>
</ul>
答案 1 :(得分：1)
如果我对您的问题的解释正确，则只需要存储是否已单击该项目，然后将clicked元素的类添加到正文即可。
$(document).ready(function() {
$(".nav.desktop li").hover(function() {
let body = $("body");
// Clear the classes, then set to the class of the hovered element
if (body.attr("class").indexOf("clicked") == -1) {
body.removeClass();
body.addClass($(this).attr("class"));
}
});
$(".nav.desktop li").click(function() {
let body = $("body");
body.removeClass();
body.addClass("clicked");
body.addClass($(this).attr("class"));
});
});
body类将移动到被悬停的元素上，直到被单击为止，然后将该状态锁定到被单击的元素上，直到再次被单击为止，然后将转到该被单击的类。
答案 2 :(得分：0)
了解情况是否知道元素是否被单击的方法是查看背景颜色，如果background-color为蓝色（“ rgb（0，0，255）”），则单击该元素，然后无需执行任何操作，如果不同，则将其设置为蓝色。如果您不想使用背景色，我想您可以使用带有某些键值项的类，属性或变量。
就像这样：
$(document).ready(function() {
$('.nav.desktop li').on('mouseleave mouseover click', function(event) {
if(event.type == 'click') {
$(this).css("background-color","blue");
}
else if(event.type == 'mouseover') {
if($(this).css("background-color") != "rgb(0, 0, 255)")
{
$(this).css("background-color","red");
}
}
else if(event.type == 'mouseleave') {
if($(this).css("background-color") != "rgb(0, 0, 255)")
{
$(this).css("background-color","");
}
}
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav desktop">
<li>
Lien 1
</li>
<li>
Lien 2
</li>
<li>
Lien 3
</li>
</ul>
答案 3 :(得分：0)
感谢@Josh Bacon的回答，我设法找到了解决方案。 谢谢大家的帮助！ https://codepen.io/ifeltblankk/pen/oaZOdJ
因此，首先我们将鼠标悬停并添加悬停类。 然后我们添加一个触发器，如果单击该触发器，$（this）将获得一个“ clicked”类。 如果尚未单击->主体将返回其初始类。 如果尚未单击->我们将删除单击的类，获取该Hoverclass，将其推到主体上，然后用新的替代classInitialClass。
$(document).ready(function() {
var initialClass = $( "body" ).attr('class');
$('.nav.desktop li').hover(
function(){
var Hoverclass = $(this).attr('class');
$( "body").removeClass();
$( "body" ).addClass(Hoverclass);
},
function(){
$(this).click(function () {
$(this).addClass("clicked");
});
if (!$(this).hasClass('clicked')) {
$( "body").removeClass();
$( "body" ).addClass(initialClass);
}
if ($(this).hasClass('clicked')) {
$(this).removeClass("clicked");
var Hoverclass = $(this).attr('class');
$( "body" ).addClass(Hoverclass);
$(this).removeClass("clicked");
initialClass = $(this).attr('class');
}
}
);
}); ul.nav{
position:fixed;
top:20px;
left:50px;
}
.color{
width:20px;
height:20px;
background-color:grey;
position:fixed;
top:0px;
left:10px;
display:block;
}
body.red .color{
background-color:red;
top:30px;
}
body.blue .color{
background-color:blue;
top:50px;
}
body.yellow .color{
background-color:yellow;
top:70px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="red">
<div class="color">
</div>
<ul class="nav desktop">
<li class="red">
Red
</li>
<li class="blue">
Blue
</li>
<li class="yellow">
Yellow
</li> <br><br>
The idea is <br>
hover(<br>
change body class to hovered item (red/yellow/blue)<br>
)<br>
mouseleaves(<br>
if have been clicked-> do nothing (keep class of hovered item)<br>
if have not been clicked -> revert to initial class<br>
)
</ul>
</body>