搜索
搜索

悬停链接效果

Leonor Guedes de Oliveira 发表于 Dev
20
列奥诺·瓜德斯·奥利维拉

我正在使用CSS悬停效果，即粘纸（http://www.designrazor.net/30-pure-css3-image-hover-effects/）。我想尝试在后面的圈子中添加一个链接。

但是我的问题是该链接不可点击。谁能帮我看看问题出在哪里？我认为这是因为该类，但是我不知道必须更改或放入CSS中的内容。

.anim750 {
  transition: all 750ms ease-in-out;
}
#Awesome {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  backface-visibility: hidden;
}
#Awesome .sticky {
  transform: rotate(45deg);
}
#Awesome:hover .sticky {
  transform: rotate(10deg);
}
#Awesome .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}
#Awesome .reveal .circle {
  box-shadow: 0 1px 0px rgba(0, 0, 0, .15);
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
#Awesome .reveal .circle {
  background: #fafafa;
}
#Awesome .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#Awesome .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}
#Awesome .back {
  height: 10px;
  top: 30px;
}
#Awesome:hover .back {
  height: 90px;
  top: 110px;
}
#Awesome .back .circle {
  margin-top: -130px;
  background-color: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0), rgba(255, 255, 255, .8));
}
#Awesome:hover .back .circle {
  margin-top: -50px;
}
#Awesome .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, .3);
}
#Awesome:hover .front {
  height: 70px;
  -webkit-box-shadow: 0 -60px 10px -60px rgba(0, 0, 0, .1);
}
#Awesome .front .circle {
  margin-top: -10px;
  background: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: -moz-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
}
#Awesome h4 {
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  text-align: center;
  position: absolute;
  width: 180px;
  height: 140px;
  line-height: 140px;
  transition: opacity 50ms linear 400ms;
}
#Awesome:hover h4 {
  opacity: 0;
  transition: opacity 50ms linear 300ms;
}
#Awesome:hover .front .circle {
  margin-top: -90px;
  background-color: #e2d439;
  background-position: 0 100px;
}
<div id="Awesome" class="anim750">

  <div class="reveal circle_wrapper">
    <div class="circle"><a href="www.google.com">click</a>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="front circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="back circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

</div>

隐藏的爱好

您遇到的问题是，尽管divs看起来不像，但它们包含在框中。这些盒子是透明的，并堆叠在链接的顶部。要使链接可单击，您需要使用z-index以下命令修改堆叠顺序：

  • #Awesome a使用以下命令添加新规则：
    • position: relative;-使z-index工作
    • transition: z-index 0s;-将确保当元素不悬停时，从z-index: 1;到的过渡z-index: 0;是即时的
    • z-index: 0; -默认情况下，将链接放置在其他元素的后面
  • #Awesome:hover a使用以下命令添加新规则：
    • transition: z-index 1s ease-in-out; -当动画结束时，将确保链接堆叠在其他元素上方
    • z-index: 1; -将链接放在其他元素上方

.anim750 {
  transition: all 750ms ease-in-out;
}
#Awesome {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  backface-visibility: hidden;
}
#Awesome .sticky {
  transform: rotate(45deg);
}
#Awesome:hover .sticky {
  transform: rotate(10deg);
}
#Awesome .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}
#Awesome .reveal .circle {
  box-shadow: 0 1px 0px rgba(0, 0, 0, .15);
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
#Awesome .reveal .circle {
  background: #fafafa;
}
#Awesome .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#Awesome .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}
#Awesome .back {
  height: 10px;
  top: 30px;
}
#Awesome:hover .back {
  height: 90px;
  top: 110px;
}
#Awesome .back .circle {
  margin-top: -130px;
  background-color: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0), rgba(255, 255, 255, .8));
}
#Awesome:hover .back .circle {
  margin-top: -50px;
}
#Awesome .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, .3);
}
#Awesome:hover .front {
  height: 70px;
  -webkit-box-shadow: 0 -60px 10px -60px rgba(0, 0, 0, .1);
}
#Awesome .front .circle {
  margin-top: -10px;
  background: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: -moz-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
}
#Awesome h4 {
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  text-align: center;
  position: absolute;
  width: 180px;
  height: 140px;
  line-height: 140px;
  transition: opacity 50ms linear 400ms;
}
#Awesome:hover h4 {
  opacity: 0;
  transition: opacity 50ms linear 300ms;
}
#Awesome:hover .front .circle {
  margin-top: -90px;
  background-color: #e2d439;
  background-position: 0 100px;
}
#Awesome a {
  position: relative;
  transition: z-index 0s;
  z-index: 0;
}
#Awesome:hover a {
  transition: z-index 1s ease-in-out;
  z-index: 1;
}
<div id="Awesome" class="anim750">

  <div class="reveal circle_wrapper">
    <div class="circle"><a href="www.google.com">click</a>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="front circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="back circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使按钮与悬停效果链接

Bootstrap 4导航链接悬停效果

悬停效果不会更改锚链接的颜色

消除对Materialise CSS链接的悬停效果

链接上的悬停效果不起作用

如何禁用活动链接的悬停效果？

如何重新启用链接悬停效果

悬停时滚动链接文本 - 无尽的选取框效果

Bootstrap 3：导航栏链接悬停效果带边框问题

CSS3超链接使用jQuery动画悬停效果

应用悬停效果后，无法单击图像链接

如何仅在环绕图像的链接上激活悬停效果

如何创建排斥其他链接的悬停效果？

如何更改react-bootstrap导航栏链接的悬停效果？

无悬停的悬停效果

A：除了悬停的链接之外，所有内容都悬停模糊效果（使用文本阴影）？

悬停效果问题-悬停效果消失

悬停图像时的悬停效果

悬停在与Raphaël.js关联的链接上的路径填充效果问题

在移动设备或小显示器上时，将悬停效果切换为链接

如何在Nuxt.js中的图标链接上正确实现悬停效果

我如何在Java中使用swing在jeditorpane中的超链接上添加on悬停效果

为什么此链接悬停效果从中间开始而不是从左边开始？

从徽标中删除特定的悬停效果，同时使其保持指向首页的链接

悬停效果影响HTML链接元素中的SVG图标和文本内容

如何在悬停反应路由器链接时实现显示下划线的过渡效果？

悬停效果上的JavaScript在子链接上不起作用

悬停在图像链接上的效果会过度扩展它所包围的 div

没有悬停效果？

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  3. 3

    错误：“ javac”未被识别为内部或外部命令，

  4. 4

    Modbus Python施耐德PM5300

  5. 5

    为什么Object.hashCode（）不遵循Java代码约定

  6. 6

    如何正确比较 scala.xml 节点？

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    在令牌内联程序集错误之前预期为 ')'

  9. 9

    数据表中有多个子行，asp.net核心中来自sql server的数据

  10. 10

    VBA 自动化错误：-2147221080 (800401a8)

  11. 11

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  12. 12

    如何在JavaScript中获取数组的第n个元素？

  13. 13

    检查嵌套列表中的长度是否相同

  14. 14

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  15. 15

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  16. 16

    ES5的代理替代

  17. 17

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  18. 18

    如何监视应用程序而不是单个进程的CPU使用率？

  19. 19

    如何检查字符串输入的格式

  20. 20

    解决类Koin的实例时出错

  21. 21

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

热门标签

归档