使按钮 link 具有悬停效果

Question

我的页面已有菜单。我想要做的是在页面右下角放置三个堆叠按钮——免责声明、关于、问题——前两个 link 到其他页面，第三个打开表单。

我花了好几天时间想弄清楚如何使用第二张彩色图像（无 sprite）让按钮通过悬停效果改变颜色并激活 hyperlink，但我发现我无法让它们同时堆叠、移动和 link。我尝试将它们全部包含在一个元素中并且不再具有活动 link。将不胜感激帮助。

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

Answer 1

这里没有什么问题。首先，您使用两个不同的 HTML 标签 a link 和除数，并且您将 ID 提供给除数而不是 link。

现在，起始 link 标记和结束 link 标记之间的任何代码都显示为 link。所以你的

<div id="disclaimer"></div>

是你的 link。然而，空除数不显示任何可见元素。

因此，要修复您的代码，您需要执行几个步骤： 1：在您的 HTML 代码中将 ID 从移到。 2：我会修改您的 CSS 代码以使用 :link 元素。参见 http://www.w3schools.com/css/css_link.asp 3: 确保 href linked 是您想要 link 又名 href="index.html"

的页面的有效 URL

除了这里的步骤之外，还有前两个修复：

第 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');
}

使按钮 link 具有悬停效果

make buttons to link with hover effect

html

css

hover