Tip Cycle

by wllai2001

HTML

<div class='wrap'>

  <div class='target no_1 selected'>
    步驟一
  </div>

  <div class='target no_2'>
    步驟二
  </div>

  <div class='target no_3'>
    步驟三
  </div>

</div>

CSS

.selected:hover::before, .selected:focus::before {
  opacity: 1;
}

.selected:after {
  content: '';
  width: 0px; height: 0;
  border-radius: 100%;
  border: 6px solid #555;
  position: absolute;
  z-index: -1;
  margin-left: -30px;
  margin-top: 10px;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

@keyframes ring {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
  }
  100% {
    width: 250px;
    height: 250px;
    opacity: 0;
  }
}

/*-----------------------------*/

div.wrap{width:630px;margin:auto;text-align:center;padding-top:100px;}
div.target{width:200px;display:inline-block;border:1px solid #ccc;cursor: pointer;}
div.target:hover{background:#555;color:#fff}

JavaScript

$('.target').on('click',function(){
  var $this = $(this);
	$('.target').removeClass('selected');
  
  
  /*為了循環加上的片段*/
  if($this.next().length!=0){
  $this.next().addClass('selected');
  }
  else{
  	  $('.no_1').addClass('selected');
  }
});