2

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>
4

1 に答える 1

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;
}
于 2013-03-10T14:33:53.870 に答える