html - 悬停效果 div 位置和边框

Question

当我将鼠标悬停在 div 上时，我想更改它上的几件事。

我想让盒子阴影更大，并将 div 稍微向上和向左移动，同时不影响这个 div 周围的其他 div。到目前为止，这是我的代码。

#divshadow {
    box-shadow: 2px 2px 10px #888;
    -moz-box-shadow: 2px 2px 10px #888;
    -webkit-box-shadow: 2px 2px 10px #888;
    border-radius: 7px;
    margin-right:  3%;
    padding-top: 8px
}

.divshadow:hover {
}

<div id="divshadow" class="divshadow"
    style="float:left;width:30%; margin-left:2%"></div>

Answer 1

这是使用 CSS3 过渡的解决方案。on 的值#divshadow:hover需要根据您的需要进行调整。

jsFiddle

#divshadow {
    box-shadow: 2px 2px 10px #888;
    -moz-box-shadow: 2px 2px 10px #888;
    -webkit-box-shadow: 2px 2px 10px #888;
    border-radius: 7px;
    margin-right:3%;
    padding-top:8px;

    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    position:relative;
    top:0px;
    left:0px;
}
#divshadow:hover {
    top:-3px;
    left:-3px;
    box-shadow: 2px 2px 20px #888;
    -moz-box-shadow: 2px 2px 20px #888;
    -webkit-box-shadow: 2px 2px 20px #888;
}