隐藏：开启之前：悬停按钮

Question

我错过了我应该隐藏：before元素，只有当它在按钮div里面时才能显示，以便在悬停按钮上创建填充效果。

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
}

<a href="#" class="button">buttt</a>

Answer 1

将:before元素高度设置为0，然后将其:hover:before更改为100%

该摘录

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
  height:100%;
}

<a href="#" class="button">buttt</a>

Answer 2

你可以将你的链接包装在div中并将溢出设置为隐藏，如下所示：

＆＃13;

＆＃13;

    a.button {
      font-size: 20px;
      color: #000;
      border: 2px solid #000;
      padding: 8px 12px;
      position: relative;
      margin: 0;
    }

    a.button:before {
      transition: 0.5s all ease-in-out;
      content: '';
      position: absolute;
      background-color: red;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
.wrap {
    float: left;
    width: 65px;
    height: 32px;
    overflow: hidden;
}
    a.button:hover {
      transition: 0.6s all ease-in-out;
      color: #fff;
    }

    a.button:hover:before {
      transition: 0.5s all ease-in-out;
      top: 0;
    }

＆＃13;

    <div class="wrap"><a href="#" class="button">buttt</a></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将public function login() { $header = array("title" => "Welcome - "); $this->load->view('includes/header', $header); $this->load->view('accounts/login'); $this->load->view('includes/footer'); } public function login_submit() { $data = array( 'username' => $this->input->post('username'), 'password' => sha1($this->input->post('password')) ); $this->form_validation->set_rules('username', 'Username', 'required|is_unique[accounts.username]|min_length[6]'); $this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[6]'); $accountDetails = $this->accounts_model->fetch('accounts', $data); if (!$accountDetails) { echo "<script>alert('Account does not exist!'); window.location.href = '".base_url()."accounts/login';</script>"; } else { $accountDetails = $accountDetails[0]; if ($accountDetails->status == 1) { $header = array("title" => "Account - "); $this->load->view('includes/header', $header); $this->load->view('admin/home', $accountDetails); $this->load->view('includes/footer'); } else { echo "<script>alert('You account is blocked!'); window.location.href = '".base_url()."accounts/login';</script>"; } } } 和display:inline-block添加到overflow:hidden样式，因为代码的默认显示为a.button。

＆＃13;

＆＃13;

inline

＆＃13;

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
  overflow:hidden;
  display:inline-block; /* Add this */
  overflow:hidden; /* Add this */
}
a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

仅插入此：

a.button {
  display: inline-block;
  overflow: hidden;
  //Other Codes...
}

a.button {
  font-size: 20px;
  color: #000;
  border: 2px solid #000;
  padding: 8px 12px;
  position: relative;
  margin: 0;
  display: inline-block;
  overflow: hidden;
}

a.button:before {
  transition: 0.5s all ease-in-out;
  content: '';
  position: absolute;
  background-color: red;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

a.button:hover {
  transition: 0.6s all ease-in-out;
  color: #fff;
}

a.button:hover:before {
  transition: 0.5s all ease-in-out;
  top: 0;
}

<a href="#" class="button">buttt</a>