保持点击鼠标悬停

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>

这里我创建了一个径向菜单，其中On Hover Of“+”三个Div将显示

我已经使用HTML和CSS来隐藏div，这只会在我将鼠标悬停在“+”时显示 现在我希望Hover在我点击“+”时激活，当我再次点击它应该是正常的

请帮助我这样做 如果它是由jquery或css

完成的

你能帮我做一下吗

先谢谢。

JS FIDDLE Example

Answer 1

您可以根据班级检查特定班级并显示或隐藏。如果显示，请更改该类，以便下次可以隐藏。

例如，将id="MyElement"添加到i。同时向class

添加i是或否

    $('.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
      }
    });

Answer 2

＆＃13;

＆＃13;

$(".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')

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;