边框顶部过渡无法正常工作

我在 CSS 中使用 transition 属性，但它无法在边框上正常工作。它过渡到，但不是向外转换。这是我的代码，有什么帮助吗？

#menu {
  width: 100%;
  height: 70px;
}
#menuitem {
  width: 150px;
  height: 70px;
  float: right;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
#menuitem:hover {
  border-top: 12px solid #000;
}
.menutext {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  color: #000;
  text-decoration: none;
}

<body>
  <div id="menu">
    <div class="menutext" id="menuitem">CONTACT</div>
    <div class="menutext" id="menuitem">ABOUT</div>
    <div class="menutext" id="menuitem">PRICES</div>
  </div>
</body>

小提琴：http://jsfiddle.net/MhkTT/

不会发生反向转换，因为仅在hover边界上指定。您必须将其添加到#menuitem中，如代码片段所示，以使其转换回原始状态。

#menu {
  width: 100%;
  height: 70px;
}
#menuitem {
  width: 150px;
  height: 70px;
  float: right;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
  border-top: 0px solid transparent;  /* added this */
  transition: all ease-in-out 0.2s;
}
#menuitem:hover {
  border-top: 12px solid #000;
}
.menutext {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  color: #000;
  text-decoration: none;
}

<div id="menu">
  <div class="menutext" id="menuitem">CONTACT</div>
  <div class="menutext" id="menuitem">ABOUT</div>
  <div class="menutext" id="menuitem">PRICES</div>
</div>

小提琴演示

（最初我设置了border属性，但对其进行了更改以匹配您问题中的代码。

您没有在非悬停样式中设置任何border-top属性。浏览器不知道要转换回什么，所以它只是跳跃。

只需将其添加到#menuitem：

border-top: 0px solid #000

（或者你想从任何颜色过渡，白色表示根本没有颜色过渡）

LIke this

演示

.css

#menuitem:hover {
    border-top: none;
}

而不是

border-top: 12px solid #FFF;

给出这个 CSS 代码

box-shadow:inset 0px 12px 0px 0px #000

http://jsfiddle.net/MhkTT/2/

相关内容

最新更新

热门标签：