Question

我正在尝试使用bootstrap 4卡元素构建简单的定价表，但我找不到解决一个问题的方法。

  .card {
    border: 0;
    border-radius: 0px;
    -webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
    box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
    transition: all .3s ease-in-out;
    padding: 2.25rem 0;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      border: 3px solid $primary-color;
      transition: 0.5s;
    }

    &:hover {
      transform: scale(1.05);
      -webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
      box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);

      &:after {
        border: 3px solid $primary-color;
        width: 100%;
      }

Live Codepen

这是负责在悬停表格顶部绘制线条的代码。问题是我不知道如何在每个表的左上角隐藏这个小绿色矩形。客户悬停表时，我试图使边框变白并变为绿色。它有效，但随后可见淡入淡出效果。我宁愿保持它现在，只是以某种方式摆脱这个矩形。

Answer 1

从:after移除边框并添加height: 3px，同时删除:after上:hover的边框

   .card {
        border: 0;
        border-radius: 0px;
        -webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
        box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
        transition: all .3s ease-in-out;
        padding: 2.25rem 0;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 3px;
          background: $primary-color;
          transition: 0.5s;
        }

        &:hover {
          transform: scale(1.05);
          -webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
          box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);

          &:after {
            width: 100%;
          }

Hidding顶部边框在bootstrap 4

1 个答案: