制作按钮以链接悬停效果答案

【问题标题】：make buttons to link with hover effect制作按钮以链接悬停效果
【发布时间】：2015-11-28 21:16:49
【问题描述】：

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

我花了几天时间试图弄清楚如何使用第二张彩色图像（无精灵）通过悬停效果更改按钮颜色并拥有一个活动的超链接，但我发现我无法让它们堆叠并同时插入和链接。我尝试将它们全部包含在一个元素中，并且不再具有活动链接。非常感谢帮助。

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

【问题讨论】：

我没有对此进行测试，但我的第一个想法是将 :hover 放在元素上而不是封闭的
上。
您是否正在寻找类似于 this 的 CSS 工具提示，但具有自定义背景图片？

标签： html css hover

【解决方案1】：

这里的问题很少。首先，您使用两个不同的 HTML 标记一个链接和除数，并且您将 ID 提供给除数而不是链接。

现在开始链接标记和结束链接标记之间的任何代码都是显示为链接的内容。所以你的

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

是您的链接。然而，一个空的除数不显示任何可见的元素。

因此，要修复您的代码，您需要执行以下几个步骤： 1：在您的 HTML 代码中将 ID 从移动到。 2：我会修改您的 CSS 代码以使用 :link 元素。见http://www.w3schools.com/css/css_link.asp 3：确保链接的 href 是您要链接到的页面的有效 URL，即 href="index.html"

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

第一步

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

【讨论】：

谢谢爱德华，这有帮助。仍然无法让它们堆叠起来，但这让我更接近！
我不确定你所说的让它们堆叠是什么意思。像下面这样垂直对齐还是什么？链接1 链接2 链接3
这样右下角垂直堆叠在另一个顶部。我终于妥协了，让它们水平放置。
尝试在 HTML 代码中的每个之后添加
。它添加了一个换行符。
@EdwardCrader “CSS 中的除数不支持悬停元素”是什么意思？ div do 支持 :hover 伪类，如果这就是你想说的话。