首页 / 技术问答 / Html问答列表 / 问答详情

Html 将鼠标悬停在具有伪类的 div 按钮上无法正确同步

我试图为div按钮和伪元素创建一个转换，但由于某些原因，这些转换似乎彼此不同步，导致伪元素在div之前达到背景色.我try 了各种风格规则的组合，但我从来没有成功地完成一个简单的转换，以正确地工作.

.tracking__history {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.skew-btn-left {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    font-size: 20px;
    color: #2E8DEF;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-left: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
}
.skew-btn-left::after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    margin-top: -5px;
    margin-left: -5px;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
    border-right: 5px solid #13bcfa;
    
    transform-origin: top left;
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
    transition: background 1s;
}

.skew-btn-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    margin-left: 40px;
    font-size: 20px;
    color: #13bcfa;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-right: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
    transition: all .5s;
}
.skew-btn-right::after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    margin-top: -5px;
    margin-left: -5px;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
    border-left: 5px solid #13bcfa;
    
    transform-origin: bottom left;
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
}

div.skew-btn-right:hover,
div.skew-btn-left:hover,
div.skew-btn-right:hover.skew-btn-right::after, 
div.skew-btn-left:hover.skew-btn-left::after {
  background: #13bcfa;
}

.skew-btn-left a, .skew-btn-right a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0px;
    text-decoration: none;
    color: #13bcfa;
    text-transform: uppercase;
}

.skew-btn-left:hover a, .skew-btn-right:hover a {
    color: #fff;
}
<div class="tracking__history">
  <div class="skew-btn-left">
    <a href="">Tracking</a>
  </div>
  <div class="skew-btn-right">
    <a href="">History</a>
  </div>
</div>

推荐答案

你在以不同的速度转换，你也在转换all个属性，在这个例子中涉及到一些你不想在伪元素上转换的东西，所以它们是滞后的.同步你的转换，并指定你的目标是color和background属性，你应该很好.我简化了你的代码，如果你不想转换文本 colored颜色 ，你可以把它从转换中删除.

.tracking__history {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.skew-btn-left {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px;
  text-decoration: none;
  color: #13bcfa;
  text-transform: uppercase;
  position: relative;
  width: 120px;
  font-size: 20px;
  background: white;
  border-top: 5px solid #13bcfa;
  border-left: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-left::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  margin-top: -5px;
  margin-left: -2px;
  background: white;
  color: white;
  border-top: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  border-right: 5px solid #13bcfa;
  transform-origin: top left;
  -ms-transform: skew(30deg, 0deg);
  -webkit-transform: skew(30deg, 0deg);
  transform: skew(30deg, 0deg);
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px;
  text-decoration: none;
  color: #13bcfa;
  text-transform: uppercase;
  position: relative;
  width: 120px;
  margin-left: 40px;
  font-size: 20px;
  background: white;
  border-top: 5px solid #13bcfa;
  border-right: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-right::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  margin-top: -5px;
  margin-left: -5px;
  background: white;
  color: white;
  border-top: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  border-left: 5px solid #13bcfa;
  transform-origin: bottom left;
  -ms-transform: skew(30deg, 0deg);
  -webkit-transform: skew(30deg, 0deg);
  transform: skew(30deg, 0deg);
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-right:hover,
.skew-btn-left:hover,
.skew-btn-right:hover.skew-btn-right::after,
.skew-btn-left:hover.skew-btn-left::after {
  background: #13bcfa;
  color: white;
  transition: background 0.5s linear, color 0.5s linear;
}
<div class="tracking__history">
  <a class="skew-btn-left" href="">Tracking</a>
  <a class="skew-btn-right" href="">History</a>
</div>

Html相关问答推荐

使用位置时，dis会越过粘性导航栏：relative

当在双引号｜Angular .html文件中使用时，Pretier会将单引号字符替换为&；Quot；

由于列中的图像，它们不会随FlexBox中的窗口大小进行调整

Angular Project中的星级 Select

Angular 15 p-对话框不使用组件 Select 器呈现HTML

如何通过扭曲元素来倾斜元素？

在NzMessageService中传递动态TemplateRef- Angular 15

仅在过渡之前删除填充

为什么index.html在Django中有这样的名称？

rvest： Select 不包含链接的段落(<；p>；)

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

当作为常规图片输入时，Cloudfront分布式图像可显示，但作为背景图像不显示

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

如何垂直平移一个元素，使其新位置位于另外两个元素之间？

为什么我的 div 元素没有形成一个圆形时钟？

在包含 html 标签的字符串的子字符串中应用不同的样式

获取 div 中每个元素的 href 并使用它

如何清除html输入中的文本

暗模式转换器

如何使具有两个元素的 div 行在移动设备中响应

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630