0

我的问题是，代码在宽度上工作正常，因为我在 css 的主体中使用了 position:relative。但到了高度，它不同于屏幕监视器（分辨率）到另一个分辨率。如何解决高度问题，当我将链接悬停时，图像必须悬停在页面的中心。但它与屏幕分辨率不同......

body {
width:1024px;
margin:auto;
position:relative;
scrolling:no;
overflow:hidden;
color:#eee;
}


 div.logo{
width:400px;
height:250px;
border:10px solid #111;
}

div.html{padding-left:280px;}

div.css{padding-left:700px;}


span.html:hover {text-decoration: none; background: #ffffff; z-index: 6; }

span.html span {
position: absolute; 
left: -9999px;  
background: #1c1c1c;
color: #0099ff;
padding: 10px;
width:400px;
-webkit-transition: -webkit-box-shadow 0.5s ease-out;;
-moz-transition: -moz-box-shadow 0.5s ease-out;
-o-transition: box-shadow 0.5s ease-out;
}

span.html:hover span {
left: 29.3%;bottom:44.6%;
-moz-box-shadow: 0px 0px 15px #0099ff;
-webkit-box-shadow: 0px 0px 15px #0099ff;
box-shadow: 0px 0px 15px #0099ff;
} 


</style>


<div class="html">
<span class="html" title="Hipertext markup language"><a  href="" class="button small         green rounded">HTML</a>
  <span><img src="images/white_texture.jpg" height="250" width="400"/><br/>

  </span>
</span></div>
<div class="css">
<span class="html" title="Title for the pop-up"><a href="" >CSS</a>
  <span><img src="card.jpg"/><br/>

  </span>
</span>
</div>
4

1 回答 1

1

关于您到底想做什么还不清楚，而不是：

span.html:hover span {
left: 29.3%;bottom:44.6%;
-moz-box-shadow: 0px 0px 15px #0099ff;
-webkit-box-shadow: 0px 0px 15px #0099ff;
box-shadow: 0px 0px 15px #0099ff;
}

尝试：

span.html:hover span {
top: 50%; left:50%;
margin-top: -125px; /* negative half the height of your span element */
margin-left: -200px; /* negative half the width of your span element */
-moz-box-shadow: 0px 0px 15px #0099ff;
-webkit-box-shadow: 0px 0px 15px #0099ff;
box-shadow: 0px 0px 15px #0099ff;
}

这是假设跨度标签中的 img 将始终具有相同的宽度。

于 2012-04-25T07:21:49.500 回答