悬停效果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过渡的溶液。 #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; 
}