懸停效果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; 
}