单击菜单选项后，单击时冻结悬停

freezing hover onclick after clicking a menu option

本文关键字：单击 冻结 悬停 菜单 选项      更新时间：2023-09-26

我有一个菜单。

#menu {
  background: red;
}
.menu-option {} .menu-option:hover {
  background: maroon;
}
.menu-option:active {
  background: black;
}
<div id="menu" align="center">
  <div class="menu-option" align="center" onclick="showgenre(1)">Literary</div>
  <div class="menu-option" align="center" onclick="showgenre(2)">FilmFest</div>
  <div class="menu-option" align="center" onclick="showgenre(3)">Dance</div>
  <div class="menu-option" align="center" onclick="showgenre(4)">Music</div>
  <div class="menu-option" align="center" onclick="showgenre(5)">Fine Arts</div>
  <div class="menu-option" align="center" onclick="showgenre(6)">Quiz</div>
  <div class="menu-option" align="center" onclick="showgenre(7)">Dramatics</div>
</div>

现在我想要的是，当我单击任何菜单选项时，该特定menu-option的background应该永久maroon，直到单击任何其他选项而所有其他选项都red。

我如何实现相同的目标？首选 CSS。

CSS解决方案是将tabindex添加到元素中，以便它们获得焦点，然后在焦点上设置颜色。 

#menu {
  background: red;
}
.menu-option:hover,
.menu-option:focus {
  background: maroon;
  outline:none;
}
<div id="menu" align="center">
  <div class="menu-option" align="center" onclick="showgenre(1)" tabindex="-1">Literary</div>
  <div class="menu-option" align="center" onclick="showgenre(2)" tabindex="-1">FilmFest</div>
  <div class="menu-option" align="center" onclick="showgenre(3)" tabindex="-1">Dance</div>
  <div class="menu-option" align="center" onclick="showgenre(4)" tabindex="-1">Music</div>
  <div class="menu-option" align="center" onclick="showgenre(5)" tabindex="-1">Fine Arts</div>
  <div class="menu-option" align="center" onclick="showgenre(6)" tabindex="-1">Quiz</div>
  <div class="menu-option" align="center" onclick="showgenre(7)" tabindex="-1">Dramatics</div>
</div>

这里的问题是，如果焦点丢失，颜色也会消失，因此需要一些JS。使用JS，您只需设置类即可 

$(function() { // execute after the elements are ready 
               // this is also a short form for $(document).ready(function(){
  $('.menu-option').click(function() {
    $(this).addClass('maroon').siblings().removeClass('maroon');
  });
});
#menu {
  background: red;
}
.menu-option:hover,
.menu-option.maroon {
  background: maroon;
  outline: none;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu" align="center">
  <div class="menu-option" align="center" onclick="showgenre(1)">Literary</div>
  <div class="menu-option" align="center" onclick="showgenre(2)">FilmFest</div>
  <div class="menu-option" align="center" onclick="showgenre(3)">Dance</div>
  <div class="menu-option" align="center" onclick="showgenre(4)">Music</div>
  <div class="menu-option" align="center" onclick="showgenre(5)">Fine Arts</div>
  <div class="menu-option" align="center" onclick="showgenre(6)">Quiz</div>
  <div class="menu-option" align="center" onclick="showgenre(7)">Dramatics</div>
</div>

为了使脚本正确执行，必须首先加载元素。 这意味着您可以将脚本放在文档的头部，但随后您必须设置一个准备好的处理程序来等待元素。或者，您可以在将元素加载到靠近主体末端之后放置它。

相关文章：