主页 / 问题 / 862722
Accepted
Сергій mk
Asked:2020-08-01 02:51:46 +0800 CST2020-08-01 02:51:46 +0800 CST

悬停点外观效果

  • 772

在此处输入图像描述

如何使绿点出现:hover？

css

1 个回答

  1. Best Answer

    选项1

    a {
  display: inline-block;
  padding: 25px;
  position: relative;
  background: #E6E988;
}

a:after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: green;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s ease;
}

a:hover:after {
  opacity: 1;
}
    <a href="#">Link</a>

    选项 2

    a {
  display: inline-block;
  padding: 25px;
  position: relative;
  background: #E6E988;
}

a:after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: green;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .3s ease;
}

a:hover:after {
  transform: scale(1);
}
    <a href="#">Link</a>

    • 5

相关问题