当前位置： 文江博客话题详情

悬停时按钮边框效果不佳

发布于 2025-01-11 13:33:55 字数 4572 浏览 0 评论 0原文

我正在练习 HTML 和 CSS，并且想要创建一个按钮。我希望鼠标悬停时按钮周围出现彩色边框。然而，我不知何故陷入困境，无法做对的事情。边框没有完全显示在按钮周围，也没有完全显示。如果有人能帮助我找出我做错了什么并给出解决方案来解决它，我将不胜感激。

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
h1 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding-top: 20px;
  color: #000;
}

h2 {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #999;
}

.button {
  width: 200px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*border: solid green;*/
}
.button:hover .hoverBtn:before, .button:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1) ;
  animation-direction:normal;
  border: solid yellow;
}
.button:hover .hoverBtn-bottom:before, .button:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: open 0.4s;
  /* Chrome, Safari, Opera */
  animation: openB 0.4s;
  animation-delay: 0.4s;
  animation-fill-mode:forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  /*border: solid pink;*/
}
.button h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #587785;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  line-height: 55px;
}

.hoverBtn {
  width: 100%;
  height: 55px;
  position: absolute;
  top: -1px;
}
.hoverBtn:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 100px;
  
}
.hoverBtn:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 100px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 55px;
  position: absolute;
  /*border: solid blue;*/
  top: 0px;

}
.hoverBtn-bottom:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display:block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}
.hoverBtn-bottom:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}

h2.credits {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  color: #888;
  font-size: 16px;
}

/*


*/

@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 55px;
  }
}

@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="border.css">
    <title>Border</title>
</head>
<body>
    <h1>Hover Border Animation</h1>

  <div class="button">
    <h2 class="hoverBtn">Hobbies</h2>
    <br>
    <div class="hoverBtn-bottom"></div>
    <div class="box-img-container"></div>
  </div>

</body>
</html>

先感谢您。

原文

I'm practicing HTML and CSS, and want to create a button. I want a colored border appear around the button when hovered. However, I'm somehow stuck and can't get something right. The border doesn't appear quite around the button, as well as not showing up completely. I'd appreciate it if somebody could kindly help me figure out what I'm doing wrong and give a solution to fix it.

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
h1 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding-top: 20px;
  color: #000;
}

h2 {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #999;
}

.button {
  width: 200px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*border: solid green;*/
}
.button:hover .hoverBtn:before, .button:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1) ;
  animation-direction:normal;
  border: solid yellow;
}
.button:hover .hoverBtn-bottom:before, .button:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: open 0.4s;
  /* Chrome, Safari, Opera */
  animation: openB 0.4s;
  animation-delay: 0.4s;
  animation-fill-mode:forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  /*border: solid pink;*/
}
.button h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #587785;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  line-height: 55px;
}

.hoverBtn {
  width: 100%;
  height: 55px;
  position: absolute;
  top: -1px;
}
.hoverBtn:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 100px;
  
}
.hoverBtn:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 100px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 55px;
  position: absolute;
  /*border: solid blue;*/
  top: 0px;

}
.hoverBtn-bottom:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display:block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}
.hoverBtn-bottom:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}

h2.credits {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  color: #888;
  font-size: 16px;
}

/*


*/

@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 55px;
  }
}

@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="border.css">
    <title>Border</title>
</head>
<body>
    <h1>Hover Border Animation</h1>

  <div class="button">
    <h2 class="hoverBtn">Hobbies</h2>
    <br>
    <div class="hoverBtn-bottom"></div>
    <div class="box-img-container"></div>
  </div>

</body>
</html>

Thank you in advance.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

守护在此方 2025-01-18 13:33:55

最简单的解决方案是在 .hoverBtn:before 和 上将 display: block; 替换为 display: inline-block;：之后。这修复了对齐方式，然后您可以通过将带有黄色边框的样式（.button:hover .hoverBtn:before、.button:hover .hoverBtn:after）拆分为两种不同的样式来删除中间边框，然后删除之前的右边框并删除之后的左边框。

请参阅下面我所做的 CSS 更改：

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
h1 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding-top: 20px;
  color: #000;
}

h2 {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #999;
}

.button {
  width: 200px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*border: solid green;*/
}

.button:hover .hoverBtn:before {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  border: solid yellow;
  border-right: none;
  width: 200px;
}

.button:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  border: solid yellow;
  border-left: none;
  width: 200px;
}

.button:hover .hoverBtn-bottom:before,
.button:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: open 0.4s;
  /* Chrome, Safari, Opera */
  animation: openB 0.4s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  /*border: solid pink;*/
}

.button h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #587785;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  line-height: 55px;
}

.hoverBtn {
  width: 100%;
  height: 55px;
  position: absolute;
  top: -1px;
}

.hoverBtn:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 100px;
}

.hoverBtn:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 100px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 55px;
  position: absolute;
  /*border: solid blue;*/
  top: 0px;
}

.hoverBtn-bottom:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}

.hoverBtn-bottom:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}

h2.credits {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  color: #888;
  font-size: 16px;
}


/*


*/

@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 55px;
  }
}

@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="border.css">
  <title>Border</title>
</head>

<body>
  <h1>Hover Border Animation</h1>

  <div class="button">
    <h2 class="hoverBtn">Hobbies</h2>
    <br>
    <div class="hoverBtn-bottom"></div>
    <div class="box-img-container"></div>
  </div>

</body>

</html>

The simplest solution would be to replace display: block; with display: inline-block; on both .hoverBtn:before and :after. This fixes the alignment, then you can remove the middle borders by splitting the styles with the border yellow (.button:hover .hoverBtn:before, .button:hover .hoverBtn:after) into two different styles, then remove the border-right on before and remove the border-left on after.

See the CSS changes I made below:

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
h1 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding-top: 20px;
  color: #000;
}

h2 {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #999;
}

.button {
  width: 200px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*border: solid green;*/
}

.button:hover .hoverBtn:before {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  border: solid yellow;
  border-right: none;
  width: 200px;
}

.button:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  border: solid yellow;
  border-left: none;
  width: 200px;
}

.button:hover .hoverBtn-bottom:before,
.button:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: open 0.4s;
  /* Chrome, Safari, Opera */
  animation: openB 0.4s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  /*border: solid pink;*/
}

.button h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #587785;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  line-height: 55px;
}

.hoverBtn {
  width: 100%;
  height: 55px;
  position: absolute;
  top: -1px;
}

.hoverBtn:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 100px;
}

.hoverBtn:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 100px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 55px;
  position: absolute;
  /*border: solid blue;*/
  top: 0px;
}

.hoverBtn-bottom:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}

.hoverBtn-bottom:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}

h2.credits {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  color: #888;
  font-size: 16px;
}


/*


*/

@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 55px;
  }
}

@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="border.css">
  <title>Border</title>
</head>

<body>
  <h1>Hover Border Animation</h1>

  <div class="button">
    <h2 class="hoverBtn">Hobbies</h2>
    <br>
    <div class="hoverBtn-bottom"></div>
    <div class="box-img-container"></div>
  </div>

</body>

</html>

回复 原文
~没有更多了~

关于作者

夜司空

暂无简介

文章
评论
584 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

忆悲凉

文章 0 评论 0

hgfg1645

文章 0 评论 0

qq_qLPLYi

文章 0 评论 0

戏舞

文章 0 评论 0

殊姿

文章 0 评论 0

﹂绝世的画

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文