代码之家 › 专栏 › 技术社区 › Duck

平滑悬停动画作品在一个随机网站,但不是在我的,为什么?

css html

-1

Duck · 技术社区 · 6 年前

我尝试使用插入边框的例子 here

<!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。

3 回复 | 直到 6 年前

manin 6 年前

我改变了过渡的功能 ease 到 ease-in-out

Robert Azar Sammie 6 年前

我编辑了你的代码,复制粘贴到你的编辑器并保存。应该有用。跳这个有帮助

        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;
        }


        .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;
        }

<!DOCTYPE html>
<html>

<head>

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

    <div class="border">Inset Border</div>


    </body>

</html>

CanUver 6 年前

如果我错了,请纠正我,但是转换属性不应该在元素a中吗(不是a:悬停)。你不会错过的,是吗?

.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;
  transition: all 0.3s ease; //  is it defined here ?
}

如果不是这样的话,你可以下载js文件或者代码片段。