我有一个导航菜单,如果我将 li 元素悬停在 psuedo 之前,我想更改当前 li 和 li 元素之后的属性
.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 & Adriyatik <i class="fa fa-chevron-right"></i></a>
</li>
<li><a href="#">Akdeniz & 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 & 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>
最佳答案
我想这就是你想要的:
.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;
}
因此您也可以在悬停时使用相邻的同级选择器。
关于javascript - hover li 和第二个 li 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39702605/