hover li and second li element

Question

I have a navigation menu and it has before psuedo if I hover my li element I want to change properties of current li and after than li element

 .cruise-turlari .cruise-box .cruise-list-box ul li:after { content: ""; width: 86%; display: block; margin: 0 auto; height: 1px; background: #cbcbcb; } .cruise-turlari .cruise-box .cruise-list-box ul li a { display: block; color: #000; font-size: 14px; padding: 7px 33px; -webkit-transition: all linear 0.4s; -moz-transition: all linear 0.4s; transition: all linear 0.4s; } .cruise-turlari .cruise-box .cruise-list-box ul li a:hover { background: #000; color: #FFF; } 

 <div class="cruise-list-box"> <ul> <li><a href="#">Vizesiz Yunan Adaları İzmir Hareket <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Vizesiz Yunan Adaları İstanbul Hareket <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Vizesiz Yunan Adaları <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Ege &amp; Adriyatik <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Akdeniz &amp; Adriyatik <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Baltık Başkentleri <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Kuzey Avrupa &amp; Akdeniz <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Fiyordlar <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Akdeniz <i class="fa fa-chevron-right"></i></a> </li> <li><a href="#">Kanarya Adaları <i class="fa fa-chevron-right"></i></a> </li> </ul> </div> 

and click to real demo

Answer 1

I think this is what you want:

.cruise-turlari .cruise-box .cruise-list-box ul li:hover:before, .cruise-turlari .cruise-box .cruise-list-box ul li:hover + li:before {
  height: 1px;
  background: transparent;
}

So you use the adjacent sibling selector on the hover too.

Answer 2

you add a special class

.cruise-list-box ul li.special:after {
    height: 1px;
    opacity: 0;
}

then, using jQuery, add events on mouseover and mouseleave

$('li').mouseover(function(){
  $(this).addClass('special');
});
$('li').mouseleave(function(){
 $(this).removeClass('special');
});