Question

当我将鼠标悬停在div上时，我想改变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过渡的解决方案。 #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;
}

悬停效果div位置和边框

1 个答案: