2

我transition在 CSS 中使用该属性，但它不能与边框一起正常工作。它转入，但不转出。这是我的代码，有什么帮助吗？

#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/

4

4 回答 4

2

反向转换不会发生，因为只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属性，但将其更改为与您问题中的代码匹配。）

于 2013-10-03T12:22:12.043 回答
1

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

只需将其添加到#menuitem：

border-top: 0px solid #000

（或您想要转换的任何颜色，白色表示根本没有颜色转换）

于 2013-10-03T12:22:35.807 回答
0

代替

border-top: 12px solid #FFF;

给出这个 CSS 代码

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

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

于 2013-10-03T12:36:59.257 回答
0

像这样

演示

css

#menuitem:hover {
    border-top: none;
}
于 2013-10-03T12:25:22.467 回答