Question

我试图在stackover流程中搜索这个效果，但我不知道，开发人员称这种悬停效果也无法实现它。

Answer 1

您可以说css3的box-shadow css属性已应用inset：

div{
  width:200px;
  height:150px;
  background:#156a70;
  text-align:center;
  line-height:150px;
}
div:hover{
  box-shadow: inset 0px 0px 30px 5px rgba(135,255,249,1);
}

<div>Hover me!!</div>

Answer 2

只需右键单击按钮 - ＆gt;检查元素

看到这个css：

#input-file-wrapper {
    display: block;
    position: absolute;
    width: 180px;
    height: 30px;
    left: 50%;
    margin-left: -90px;
    top: 79px;
    cursor: pointer;
    background: url(https://zbigz.com/img/upload-torrent-file-btn.png) no-repeat;
    background-position: 0 -0;
}

#input-file-wrapper:hover {
    background-position: 0 -43px;
}

http://jsfiddle.net/7h4zns5m/

如果您查看图像，您会看到有3个不同的按钮，他们只需将background-position更改为另一个按钮图像。这样它看起来像弹出;）

如何创建像zbigz.com这样的按钮悬停效果

2 个答案: