Question

我在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/

Answer 1

不会发生反向转换，因为仅指定了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>

Fiddle Demo

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

Answer 2

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

只需将其添加到#menuitem：

即可

border-top: 0px solid #000

（或者你要转换的任何颜色，白色都没有颜色过渡）

Answer 3

喜欢这个

<强> demo

<强> CSS

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

Answer 4

而不是

border-top: 12px solid #FFF;

提供此CSS代码

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

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

边界过渡不能正常工作

4 个答案: