Question

只是想知道是否有任何人有修复问题的经验我已经使用按钮的3D效果悬停状态。

.button{
cursor: pointer;
display: block;
line-height: 44px;
height: 44px;
width: 159px;
background: #ff9600;
border-radius: 5px;
text-align: center;
font-size: 18px;
color: #fff;
}
.button:hover {
display: block;
min-height: 44px;
min-width: 159px;
background: #e68700;
border-radius: 5px;
text-align: center;
font-size: 18px;
border: 0 solid #fff;
color: #fff;
position: relative;
top: -5px;
bottom: auto;
left: -5px;
right: auto;
cursor: pointer;
background: #e68700;
box-shadow: #c2c2c2 1px 1px, #c2c2c2 2px 2px, #c2c2c2 3px 3px, #c2c2c2 4px 4px, #c2c2c2 5px 5px;
}

正如您在我的示例中所看到的，问题是，当您将鼠标悬停在按钮上时，如果光标位于阴影上，则悬停状态将停用。我知道这是因为我基本上将按钮移离光标，但我认为创建的阴影可以保留悬停状态吗？

如果有人知道任何修复会很棒！但在某一刻它只是一种刺激性比什么都重要。

谢谢！

安迪

Answer 1

.button{
    cursor: pointer;
    display: block;
    line-height: 44px;
    height: 44px;
    width: 159px;
    background: #ff9600;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    transition: transform .3s ease,box-shadow .3s ease
}
.button:hover {
    transform: translate3d(-5px,-5px,0);
    box-shadow: #c2c2c2 1px 1px, #c2c2c2 2px 2px, #c2c2c2 3px 3px, #c2c2c2 4px 4px, #c2c2c2 5px 5px;
}

<span class="button">button</span>

或尝试：speudo-elements

.button{
    display: block;
    position: relative;
    height: 44px;
    width: 159px;
    color: transparent
}
.button:after{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    line-height: 44px;
    height: 100%;
    width: 100%;
    background: #ff9600;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    transition: transform .3s ease,box-shadow .3s ease
}
.button:hover:after {
    transform: translate3d(-5px,-5px,0);
    box-shadow: #c2c2c2 1px 1px, #c2c2c2 2px 2px, #c2c2c2 3px 3px, #c2c2c2 4px 4px, #c2c2c2 5px 5px;
}

<span class="button" data-text=button>button</span>

Answer 2

我有一个不同的方法，只需将box-shadow设置为inset，因此阴影将位于按钮内，当您悬停在阴影上时，您不会失去悬停状态。

此外，您需要在悬停时添加更具体的border-radius，使其看起来像外部阴影..请参阅此http://jsfiddle.net/b47xor6d/3/

.button:hover {
    display: block;
    min-height: 44px;
    height:49px;
     width: 164px;
    min-width: 159px;
    background: #e68700;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    border: 0 solid #fff;
    color: #fff;
    position: relative;
    border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
    top: -5px;
    bottom: auto;
     left: -5px;
    right: auto;
    cursor: pointer;
    background: #e68700;
    box-shadow:inset #c2c2c2 -1px -1px,inset #c2c2c2 -2px -2px,inset #c2c2c2 -3px -3px,inset #c2c2c2  -4px -4px,inset #c2c2c2 -5px -5px;
}

3D效果按钮悬停状态CSS（可能的错误？）

2 个答案: