点击时保持悬停

Question

.radial {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  top: 0;
  margin-left: -25%;
}

.menu {
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  top: 5px;
  width: 100%;
}
.menu a {
  font-size: 13px;
  width: 55px;
  height: 55px;
  line-height: 48px;
  background: black;
  border-radius: 100em;
  color: #fff;
  position: absolute;
  text-decoration: none;
  left: 48%;
  margin-left: -24px;
  top: 20px;
  transition: all .5s ease-in-out;
  opacity: 0;
}
.menu a:hover {
  background: #2c3e50;
}
.radial:hover .menu a {
  opacity: 1;
}
.radial:hover .menu a:nth-child(1) {
  transform: translate(0, 170%);
}

.radial:hover .menu a:nth-child(2) {
  transform: translate(-170%, 0%);
}

.radial:hover .menu a:nth-child(3) {
  transform: translate(170%, 0);
}

/* .radial:hover .menu a:nth-child(4) {
  transform: translate(0, 200%);
} */

.avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 100em;
  color:white;
  background-color:#D63B2F;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.avatar img {
  max-width: 100%;
  margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div style="font-weight: bold; font-style: italic;font-size: 15px" >SELECT WIDGET</div>
	<div class='radial' >
  		<div class='avatar' style="top: 25px;" >
  			<i class="fa fa-plus fa-3x" style="top: 7px;left: 10px;position: absolute;"></i>
  		</div>
  <div class='menu'>
   
    <a href='#' class="" title='Chart' style="background-color: #E84033" >
      <i class="fa fa-bar-chart fa-2x  radialMenu" ></i>
    </a>
    <a  href='#' class=""  title='Table' style="background-color: #009688" >
      <i class="fa fa-th fa-2x radialMenu " ></i>
    </a>
    <a href='#' class="radialMenu"  title='Map' style="background-color: #3F51B5" >
      <i class="fa fa-map-marker fa-2x radialMenu" style="left: 20px;" ></i>
    </a>
  </div>
 
</div>

在这里我创建了一个径向菜单，在“+”悬停时将显示三个 Div

我使用 HTML 和 CSS 来隐藏 div，只有当我将鼠标悬停在“+”上时才会显示 现在我希望当我点击“+”时悬停处于活动状态，当我再次点击时它应该是正常的

请帮我做这件事
没关系，如果它是由 jquery 或 css 完成的

你能帮我做吗

提前致谢。

JS FIDDLE Example

Answer 1

$(".fa-plus").click(function() {

  $(".menu a").eq(0).toggleClass('opacity first-child')
  $(".menu a").eq(1).toggleClass('opacity second-child')
  $(".menu a").eq(2).toggleClass('opacity third-child')

});

.radial {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  top: 0;
  margin-left: -25%;
}

.menu {
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  top: 5px;
  width: 100%;
}

.opacity {
  opacity: 1 !important;
}

.menu a {
  font-size: 13px;
  width: 55px;
  height: 55px;
  line-height: 48px;
  background: black;
  border-radius: 100em;
  color: #fff;
  position: absolute;
  text-decoration: none;
  left: 48%;
  margin-left: -24px;
  top: 20px;
  transition: all .5s ease-in-out;
  opacity: 0;
}

.menu a:hover {
  background: #2c3e50;
}

.radial:hover .menu a {
  opacity: 1;
}

.radial:hover .menu a:nth-child(1), .first-child {
  transform: translate(0, 170%);
}

.radial:hover .menu a:nth-child(2), .second-child {
  transform: translate(-170%, 0%);
}

.radial:hover .menu a:nth-child(3), .third-child  {
  transform: translate(170%, 0);
}


/* .radial:hover .menu a:nth-child(4) {
  transform: translate(0, 200%);
} */

.avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 100em;
  color: white;
  background-color: #D63B2F;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.avatar img {
  max-width: 100%;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div style="font-weight: bold; font-style: italic;font-size: 15px">SELECT WIDGET</div>
<div class='radial'>
  <div class='avatar' style="top: 25px;">
    <i class="fa fa-plus fa-3x" style="top: 7px;left: 10px;position: absolute;"></i>
  </div>
  <div class='menu'>

    <a href='#' class="" title='Chart' style="background-color: #E84033">
      <i class="fa fa-bar-chart fa-2x  radialMenu"></i>
    </a>
    <a href='#' class="" title='Table' style="background-color: #009688">
      <i class="fa fa-th fa-2x radialMenu "></i>
    </a>
    <a href='#' class="radialMenu" title='Map' style="background-color: #3F51B5">
      <i class="fa fa-map-marker fa-2x radialMenu" style="left: 20px;"></i>
    </a>
  </div>

</div>

Answer 2

您可以检查特定类别并根据类别显示或隐藏。显示时，更改该类，以便您下次可以隐藏。

例如，将id="MyElement" 放入i。还要在i 中添加class 是或否

    $('.fa-plus').on('click', function () {
      if (document.getElementById("MyElement").classList.contains('Yes') ){
         document.getElementById("MyElement").classList.toggle('No');
         //Apply css as hover effect ones
      }
      else if (document.getElementById("MyElement").classList.contains('No') ){
         document.getElementById("MyElement").classList.toggle('Yes');
      //Apply css to hide
      }
    });