时间戳

首页 > 解决方案 > 平滑悬停动画在随机网站上有效，但在我的网站上无效，为什么？

html - 平滑悬停动画在随机网站上有效，但在我的网站上无效，为什么？

问题描述

我正在尝试使用此处的插入边框示例，当鼠标悬停时应该是平滑的，当鼠标离开时会恢复正常。此页面上的示例在该页面上完美运行：

<!DOCTYPE html>
<html>
<head>

    <link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>

    <style type="text/css">
        body > div
        {
            margin:121px 149px;
            width:483px;
            height:298px;
            background:#676470;
            color:#fff;
            font-family:Lato;
            font-weight:900;
            font-size:3.4em;
            text-align:center;
            line-height:298px;
            transition:all 0.3s ease;
        }
        .border:hover
        {
            box-shadow: inset 0 0 0 25px #53a7ea;
        }

    </style>
</head>
<body>
  <div class="border">Inset Border</div>     
</body>
</html>

当我尝试实现它时，我的效果就在鼠标悬停时顺利进行。当鼠标离开div时，它会突然恢复正常。

这是我应用于该 div 的 CSS。

该元素是一个div。可能存在于非第一个行上的每个链接都应该具有效果。

.newJobsTable {
  color:#666;
    font-size:1.0em;
  margin:0px auto;
  font-weight: 200;
  padding:40px;

}


. newJobsTable tr td:nth-child(1){
  text-align:left;
  width:30%;
  color:#000;
  font-weight:500;
  font-size: 0.72em;
  letter-spacing: 0.12em;
}

. newJobsTable tr:not(first-child) td {
  text-align:left;
  font-size: 0.7em;
  font-weight:100;
  color:#f00;
}


. newJobsTable tr:not(first-child) td a {
  all:unset;
  text-decoration: none;
  border-bottom:1px solid rgba(255,0,0,0.3);
  padding-bottom: 1px;
  font-weight: 100;
}

. newJobsTable tr:not(first-child) td a:hover {
  all:unset;
  text-decoration: none;
  border-bottom:1px solid rgba(0,0,0,0.0);
  padding-bottom: 3px;
  background:#af0000;
  color:#fff;
  cursor:pointer;
  padding-left:10px;
  padding-right:10px;
    font-weight: 200;
  border-radius: 20px;
  padding-bottom:5px;
  padding-top:5px;
  transition:all 0.3s ease;
}

我不能为此使用 Javascript，只能使用 CSS。

谢谢。

标签： htmlcss

解决方案

我更改了过渡的功能，在ease您ease-in-out预设 0.3s 的时间使开始变慢和结束变慢

推荐阅读