【发布时间】：2016-06-07 20:02:39
【问题描述】：
基于the discussion，我们知道允许在<a> 标记中放置<div>，因为我们使用的是html5，但我想知道如何更改@987654326 中的样式@。总之，我有一个这样的html代码骨架：
<a href='somelink.html'>
<div style='width:100px; height:100px'>
text text text
</div>
</a>
动机是希望实现当鼠标悬停在div上（不仅仅是文字上）时，div中的背景和文字颜色都发生变化的效果。请注意，在 css 文件的某处，第三方模板已经定义了 a:hover (a:focus)，我想在这个特定的 div 中覆盖悬停行为。有人可以给我一个提示，我应该如何做到这一点？
给你一个具体的例子，我在w3cschool.com上玩，下面提供了完整的代码。我把cmets标明了要填写的代码。
看到方块div的背景色是浅灰色，里面的文字颜色是绿色带下划线，当鼠标悬停在文字上时文字颜色变为红色。
任务
希望有效区域是整个div，即当鼠标在div时，可以实现如下：1）div变成粉红色，2）文字颜色变为白色，并且 3) 悬停时没有下划线。
代码
<!DOCTYPE html>
<html>
<head>
<style>
/* Assume following 4 rules are provided somewhere in the existing css */
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
/* ==== CHANGE HERE ======== */
.fill_a {
// what is the answer?
}
.fill_div {
// what is the answer?
}
/* ==== CHANGE HERE END ==== */
</style>
</head>
<body>
<p>Mouse over and click the link: <a href="http://www.w3schools.com">w3schools.com</a></p>
<a href='#' class='fill_a'>
<div style='width:100px; height:100px; background-color:#ddd' class='fill_div'>
123
</div>
</a>
</body>
</html>
提前感谢您的回答。
编辑 1：更多背景
我正在寻找一个非 div 解决方案（使用阻塞的锚或只是一个跨度），但我遇到的困境是我使用的是引导程序，特别是，我希望头部成为整个链接，这有点动机。例如，
<div class="panel panel-default">
<div class="panel-heading">This to be an anchor</div>
<div class="panel-body">Panel Content</div>
</div>
【问题讨论】：
-
为什么你需要一个
div在锚内？您可以删除div并仅使用被阻止的<a> -
this不是更简单吗？
-
@jose 是对的。如果你想保持文本垂直居中，那么你可以根据锚标签在顶部和底部提供填充而不是高度。
-
@Akash 使文本垂直居中的正确方法是将
height（在我的jsfiddle链接上）替换为line-height。 -
哎呀抱歉。那也可以。