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;
}

これは、span タグ内の img が常に同じ幅であるという前提の下にあります。

于 2012-04-25T07:21:49.500 に答える