CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ani_css
ani_css

Reputation: 2126

hover li and second li element

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 enter image description here

.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

Upvotes: 0

Views: 110

Answers (2)

Zirbo Filip
Zirbo Filip

Reputation: 300

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

Upvotes: 0

Goombah
Goombah

Reputation: 2855

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.

Upvotes: 2

Related Questions