我的页面已有菜单。我想要做的是在页面右下方有三个堆叠按钮 - 免责声明,关于,问题 - 前两个按钮链接到其他页面,第三个按钮打开表单。
我花了好几天试图弄清楚如何使用第二个彩色图像(没有精灵)使用悬停效果更改按钮,并且有一个活动的超链接,但我发现我无法做到让他们堆叠,然后同时链接所有。我尝试将它们全部包含在元素中,并且不再具有活动链接。很感激帮助。
HTML:
<a style="display:block" href="#/">
<div id="disclaimer"></div>
</a>
<a style="display:block" href="#"/>
<div id="about"></div>
</a>
<a style="display:block" href="#/">
<div id="questions"></div>
</a>
CSS:
#disclaimer {
background-image: url('images/disclaimer.png');
float:right;
margin-top:200px;
margin-right:100px;
height: 38px;
width: 100px;
}
#disclaimer:hover {
background-image: url('images/disclaimerh.png');
}
#about {
background-image: url('images/about.png');
float:right;
height: 38px;
width: 100px;
}
#about:hover {
background-image: url('images/abouth.png');
}
#questions {
background-image: url('images/questions.png');
height: 38px;
width: 100px;
}
#questions:hover {
background-image: url('images/questionsh.png');
}
答案 0 :(得分:0)
这里几乎没有问题。首先,您使用两个不同的HTML标记链接和除数,并且您将ID分配给除数而不是链接。
现在,起始链接标记和结束链接标记之间的任何代码都显示为链接。所以你的
<div id="disclaimer"></div>
是你的链接。但是,空除数不会显示任何可见元素。
因此,要修复代码,您需要执行以下几个步骤: 1:将ID从HTML代码移动到HTML代码中。 2:我会修改你的CSS代码以使用:link元素。见http://www.w3schools.com/css/css_link.asp 3:确保链接的href是您要链接到的页面的有效URL,即href =&#34; index.html&#34;
除了步骤之外,还有前两个修复:
第1步
<a style="display:block" href="#" id="disclaimer" />
<div></div>
</a>
<a style="display:block" href="#" id="about" />
<div></div>
</a>
<a style="display:block" href="#" id="questions" />
<div></div>
</a>
第2步
#disclaimer:link { background-image: url('images/disclaimer.png');
float:right; margin-top:200px; margin-right:100px; height: 38px;
width: 100px; }
#disclaimer:hover {
background-image: url('images/disclaimerh.png');
}
#about:link {
background-image: url('images/about.png');
float:right;
height: 38px;
width: 100px;
}
#about:hover {
background-image: url('images/abouth.png');
}
#questions:link {
background-image: url('images/questions.png');
height: 38px;
width: 100px;
}
#questions:hover {
background-image: url('images/questionsh.png');
}