我对图片有悬停效果，其中＆＃39;浮动＆＃39;向上悬停。
但是，我一直试图以这样的方式实现它，即在悬停效果期间阴影保持静止（即使图像看起来像是在地面上空盘旋。
到目前为止，我的jsfiddle看起来像this。
使用
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
为了生成阴影。
因此，图像应该看起来像（当未被发现时）：
+------+
| |
| |
+------+
________ <-- shadow/hover
/\
Hovered: /||\
||
||
+------+ ||
| | floor level
| | ||
+------+ ||
\||/
______ <-- shadow/hover \/
^
|
阴影也应该“眨眼”。大小（但不应该太实施。
所以＆＃39;阴影＆＃39;不应该移动，img应该提升。
.threeWidget {
float: left;
width: 30%;
height: 25%;
background-color: AppWorkspace;
margin: 2px;
}
.topMenImg {
transition: 0.5s;
}
.topMenImg:hover {
-moz-transform: translate(0, -8px);
-ms-transform: translate(0, -8px);
-o-transform: translate(0, -8px);
-webkit-transform: translate(0, -8px);
transform: translate(0, -8px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.TopMenu {
background-color: #808080;
border-style: inset solid;
border-width: 5px;
}
.topMenImg:hover::after {
content: "";
-webkit-transform: translateY(10px);
transform: translateY(10px);
width: 100%;
display: block;
position: absolute;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
.topMenImg::after {
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}<div class="topMenImg" style="float:left ;margin-left:8%">
<img src="http://www.clker.com/cliparts/a/1/8/b/1264830175321493735blue-marble-globe-md.png" />
</div>
非常感谢任何帮助。
正如你所知，我不是css天才，但我有梦想:)）
修改
Floating shadow shown here之类的东西是我正在寻找/瞄准
的东西答案 0 :(得分：1)
这样的东西？的 JSFiddle
我添加了一个新的子div，并在其中添加了box-shadow，然后在激活该子项的父级上设置了悬停状态。
<强> HTML：
<div class="topMenImg" style="float:left ;margin-left:8%">
<img src="http://www.clker.com/cliparts/a/1/8/b/1264830175321493735blue-marble-globe-md.png" />
<div class="shadow"></div>
</div>
<强> CSS：
.topMenImg img {
transition:0.5s;
}
.topMenImg:hover {
-moz-transform: translate(0, -8px);
-ms-transform: translate(0, -8px);
-o-transform: translate(0, -8px);
-webkit-transform: translate(0, -8px);
transform: translate(0, -8px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.topMenImg:hover::after {
content:"";
-webkit-transform: translateY(10px);
transform: translateY(10px);
width:100%;
display: block;
position: absolute;
z-index: -1;
}
.shadow {
width: 300px;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
position: absolute;
top: 330px;
}
.topMenImg:hover .shadow {
transform: scaleX(.8);
transition: 0.2s;
}
答案 1 :(得分：0)
为您的图片添加ID：
<div class="topMenImg" style="float:left ;margin-left:8%">
<img id="image" src="http://www.clker.com/cliparts/a/1/8/b/1264830175321493735blue-marble-globe-md.png" />
</div>
然后将悬停添加到您的ID：
#image:hover {
-moz-transform: translate(0, -8px);
-ms-transform: translate(0, -8px);
-o-transform: translate(0, -8px);
-webkit-transform: translate(0, -8px);
transform: translate(0, -8px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
并给你的div上课：topMenImg阴影
答案 2 :(得分：0)
将阴影的偏移量增加与减少按钮y偏移量相同的量。
答案 3 :(得分：0)
input[type="text"], input[type="button"], .search{
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
padding-left:2px;
}
input[type="button"]:hover, input[type="text"]:focus,input[type="text"] {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3), inset 0px 1px 2px rgba(0, 0, 0, 0.3), 0 0 5px 1px rgba(16, 216, 252, 0.8);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3), inset 0px 1px 2px rgba(0, 0, 0, 0.3), 0 0 5px 1px rgba(16, 216, 252, 0.8);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3), inset 0px 1px 2px rgba(0, 0, 0, 0.3), 0 0 5px 1px rgba(16, 216, 252, 0.8);
}
.TopMenu{
width:100%;
background-color:darkgray;
-webkit-box-shadow: inset 0px 0px 131px 25px rgba(0,0,0,0.55);
-moz-box-shadow: inset 0px 0px 131px 25px rgba(0,0,0,0.55);
box-shadow: inset 0px 0px 131px 25px rgba(0,0,0,0.55);
float:left;
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
}
.search {
margin-right:2%;
width:auto;
margin-left:0;
display:flexbox;
margin:auto;
}
.searchTextBox{
width:auto;
overflow:hidden;
clear:both;
}
.searchButtonSubmit{
width:auto;
margin-right:1%;
clear:both;
overflow:hidden;
}
.topMenuImg{
margin-left:5%;
float:left;
transition: 0.2s;
position: relative;
display:table-cell;
z-index:10;
}
.topMenuImg:first-child{
margin-left:20%;
}
.topMenuImg:hover{
-moz-transform: translate(0, -8px);
-ms-transform: translate(0, -8px);
-o-transform: translate(0, -8px);
-webkit-transform: translate(0, -8px);
transform: translate(0, -8px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.topMenuImg:after{ /*This is the shadow effect*/
content: '';
position: absolute;
bottom: -1%;
left: 3%;
z-index:0;
width: 90%;
height: 8%;
border-radius: 50%;
box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.10);
transition: 0.2s;
-moz-transform: translate(0, -8px);
-ms-transform: translate(0, -8px);
-o-transform: translate(0, -8px);
-webkit-transform: translate(0, -8px);
transform: translate(0, -8px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.80);
}
.topMenuImg:hover:after{ /*Also shadow effect*/
content: '';
position: absolute;
z-index:0;
bottom: 0%;
left: 18%;
width: 60%;
height: 8%;
border-radius: 50%;
box-shadow: 0px 10px 0px rgba(14, 14, 14, 0.40);
transform: scale(0.2);
-moz-transform: translate(0, 4px);
-ms-transform: translate(0, 4px);
-o-transform: translate(0, 4px);
-webkit-transform: translate(0, 4px);
transform: translate(0, 4px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
} <div id="TopMenu" class="">
<div class="topMenuImg"><img src="~/Content/Images/TopMenu/Add.png" /></div>
<div class="topMenuImg"><img src="~/Content/Images/TopMenu/Delete.png" /></div>
<div class="topMenuImg"><img src="~/Content/Images/TopMenu/Edit.png" /></div>
<div class="topMenuImg"><img src="~/Content/Images/TopMenu/Save.png" /></div>
<div class="topMenuImg"><img src="~/Content/Images/TopMenu/Print.png" /></div>
<div class="topMenuImg"><img src="~/Content/Images/TopMenu/Search.png" /></div>
</div>
我设法编辑了我的css（相当多）摆弄了很多值，最后提出了这个：
就示例小提琴而言，我已将其改为this