将鼠标悬停在“li”上，改变下一个人的风格？

Question

我有一个导航栏 每个项目的右侧都有边框（执行第一个，左边和右边有边框）。

我正在寻找隐藏下一个/上一个li右边框的方法，禁止重复边框。

您可以在第一个项目的右侧看到较亮的边框 我需要隐藏第一个项目的右边框或隐藏第二个边框的左边框，而是激活第一个项目的右边边框。

我正在查看CSS选择器，但几乎找不到任何东西。

几乎所有选择器都是从父母那里选择一个孩子。

---

CSS

#nav {
width: 100%;
height: 50px;
position: fixed;
top: 0;
margin-top: 25px;
z-index: 9;
left: 0;
display: inline;
text-align: center;
}

#nav li {
list-style: none;
display: inline;
padding: 7px;
margin-left: 2px;
margin-right: 2px;
height: 100%;
border-right: 1px solid #E3E3E3;
transition: 0.2s ease;
}

#nav li:nth-of-type(1) {
border-left: 1px solid #E3E3E3;
}


#nav li:hover:nth-of-type(1) {
border-left: 2px solid #C4C4C4;
border-right: 2px solid #C4C4C4;
}

#nav li:hover:nth-of-type(2){
border-left: 2px solid #C4C4C4;
border-right: 2px solid #C4C4C4;
}

#nav li:hover:nth-of-type(2) #nav li:nth-of-type(1){
border-left: 0px solid transparent;
}

HTML

<nav id="nav">
<li>Etusivu</li>
<li>Tietoa Meistä</li>
<li>Hinnasto</li>
<li>Yhteystiedot</li>
</nav>

---

FIDDLE

对于凌乱的解释感到抱歉。

Answer 1

http://jsfiddle.net/qp6sd0hc/

将-7px margin-left给nav li，因为默认情况下显示内联在元素之间给出了一些余量

 nav li{ margin-left: -7px; }