我在一个网站上有一堆图片作为链接，如下所示：
<A HREF="web/contact.html"><IMG SRC="img/contact2.png" class="mobile" border="0" alt="Contact"></a>
稍后，我使用CSS正确定位和调整大小，并添加了悬停效果：
.mobile{
position: absolute;
left: 69%;
top: -12%;
width: 19%;
height: auto;
transition: linear;
transition-duration: 0.5s;
z-index: 993; }
.mobile {
position:absolute;
top: -11%;
left: 68%;
width:23%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
到目前为止，这么好，按预期工作，但如果不是简单地调整它并稍微改变它的位置，我希望它在鼠标悬停时显示不同的图像呢？
我尝试这样做：
<A HREF="web/contact.html" class="mobile" border="0" alt="Contact"></a>
使用此CSS
.mobile
{
position: absolute;
display: block;
background-image: url("img/contact2.png") center top no-repeat;
width: 23.2%;
height: auto;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992; }
.mobile:hover {
position:absolute;
background-image: url('img/contact3.png');
top: -3%;
left: 11%;
width:26%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
但这只会导致图像完全消失。我究竟做错了什么？我认为它与使用％的大小有关，特别是＆＃34; height：auto＆＃34;，但由于网站其余部分的上下文，我无法取代它。 如果您需要更多信息，请告诉我，我不想用超过必要的垃圾邮件给你们。
下面我将复制粘贴整个代码，因为我意识到上次给出的最小信息，我的问题无法得到解答。也许有了这个，有人可以复制它，看看我的意思：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=800" />
<title>Mainsite</title>
</head>
<body style="padding:0px; margin:0px; overflow: scroll;" >
<body background="http://i.imgur.com/YAxp4xz.jpg">
<style>
html,body { height:100%; }
</style>
<div class="text">
<style>
@font-face {
font-family: 'gt-walsheim';
src: url('web/gt-walsheim.ttf');
}
</style>
<style type="text/css">
.prozent {line-height: 150%;
font-family: "gt-walsheim";
}
</style>
<br>
<p class="prozent" align="center">
<font size="+3.5"><b><font color="#804040">RESTAURANT-NAME</font></b> </font>
<br>
<br>
<font size="+2"><font color="#804040">Blablablablablabla Über uns balbalba ablab balbal Willkommen ablabla blabal
<br>
<br>
<br>
<br>
<br>
</div>
<!-- Ende dv class="text" -->
<div class='box'>
<div class='content'>
<div class="tisch">
<A HREF="web/menü.html"><IMG SRC="http://i.imgur.com/QebCkyE.png" class="menu" border="0" alt="Zur Speisekarte"></a>
<IMG SRC="http://i.imgur.com/qoHQ9Bd.gif" class="teller" border="0" alt="">
<A HREF="web/contact.html"><IMG SRC="http://i.imgur.com/WNR18gb.png" class="handy" border="0" alt="Kontakt"></a>
<A HREF="web/zeiten.html"><IMG SRC="http://i.imgur.com/I4GTdXr.png" class="pad" border="0" width="47%" alt="Öffnungszeiten"></a>
</div>
<!-- Ende tisch -->
</div>
</div>
<style>
.text {
position: relative;
width: 100%;
z-index: 990; }
.box{
position: relative;
width: 100%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 35%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.tisch
{
position: relative;
height: 70%;
<!-- x% höhe von alles -->
width: 100%;
z-index: 991; }
.menu
{
position: absolute;
width: 23.2%;
height: auto;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992; }
.menu:hover {
position:absolute;
top: -3%;
left: 11%;
width:26%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
.teller
{
position: absolute;
width: 35%;
height: auto;
left: 30%;
top: 0%;
z-index: 992; }
.handy
{
position: absolute;
left: 69%;
top: -17%;
width: 19%;
height: auto;
transition: linear;
transition-duration: 0.5s;
z-index: 993; }
.handy:hover {
position:absolute;
top: -15%;
left: 68%;
width:23%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
.pad
{
position: absolute;
left: 78%;
top: 48%;
width: 12%;
height: auto;
transition: linear;
transition-duration: 0.5s;
z-index: 993; }
.pad:hover {
position:absolute;
top: 43%;
left: 76%;
width:14%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;}
</style>
这些当然都是占位符图形，但这并不重要 - 我希望它不仅能够在大小和位置上进行转换，还能够在完全不同的图像上进行转换。 您可能会注意到所有内容都使用％定义，并且工作正常。这个（以及所有这些div）作为一个设置是必要的，所以无论我如何调整窗口大小，图片不仅与它成正比，而且与彼此保持一致。 在更改样式表中定义图片源而不是链接本身时，不太确定会导致问题并使我的图片消失。
答案 0 :(得分：0)
此定义不起作用有两个原因。首先，块级元素仅与内部内容一样高。里面没有内容，它是0高度。因此该元素不会出现在页面上，因为它的高度为0。第二个问题是您使用background-image错误。你打算做什么是使用background这个简写属性，因为你包括center top no-repeat。
.mobile
{
position: absolute;
display: block;
background-image: url("img/contact2.png") center top no-repeat;
width: 23.2%;
height: auto;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992; }
除了我刚才提到的问题，这个定义不起作用，因为你拼写错误的“移动”
.moblile:hover {
position:absolute;
background-image: url('img/contact3.png');
top: -3%;
left: 11%;
width:26%;
height:auto;
display:block;
transition: linear;
transition-duration: 0.5s;
z-index:999;
}
如果你解决了这些问题，那就可以了。
html,body {height:100%;}
.mobile {
position: absolute;
display: block;
background: url("http://www.w3schools.com/css/img_fjords.jpg") center top no-repeat;
width: 23.2%;
height: 100%;
left: 10%;
top: 0%;
transition: linear;
transition-duration: 0.5s;
z-index: 992;
}
.mobile:hover {
position: absolute;
background-image: url('https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg');
top: -3%;
left: 11%;
width: 26%;
display: block;
transition: linear;
transition-duration: 0.5s;
z-index: 999;
}<A HREF="web/contact.html" class="mobile" border="0" alt="Contact"></a>