Question

我尝试使用插入边框示例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;
}

我不能仅使用CSS来使用Javascript。

谢谢。

Answer 1

我将过渡ease的功能更改为ease-in-out，使得在您预设0.3s时开始缓慢而结束缓慢

Answer 2

我编辑了您的代码，将其复制并粘贴到您的编辑器中并保存。它应该工作。希望对您有帮助

        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>

Answer 3

如果我错了，请更正我，但是transition属性不应该在Element 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小提琴或代码段。

平滑悬浮动画可以在随机网站上运行，而不能在我的网站上运行，为什么？

3 个答案: