我应该如何覆盖锚标签中 div 的悬停样式？
Posted
技术标签:
【中文标题】我应该如何覆盖锚标签中 div 的悬停样式？【英文标题】：How should I override hover style of a div in an anchor tag? 【发布时间】：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。
哎呀抱歉。那也可以。
【参考方案1】：
基于您的 HTML
来自你的任务
CSS
.fill_a:hover
color:white;
text-decoration:none;
.fill_div:hover
background-color:pink !important;
您应该使用!important，因为在您的html 中您已经设置了样式。意味着放在html里面的样式是优先的。
了解更多关于样式 css https://css-tricks.com/when-using-important-is-the-right-choice/
DEMO
【讨论】：
非常好。我不得不覆盖引导 css 这个帮助。我可以申请我的 css 来覆盖【参考方案2】：试试这个 CSS：
a.fill_a
text-decoration: none;
a.fill_a:hover > div.fill_div
background-color: pink !important;
color: #fff;
Fiddle demo here
【讨论】：
我想知道有没有办法不使用!important？其实我什至不知道为什么我们必须使用!important，我只知道如果我们把它拿出来，它不起作用......
如果你把background-color:#ddd从内联样式中去掉并使用css添加它，那么你就不必使用!important以上是关于我应该如何覆盖锚标签中 div 的悬停样式？的主要内容，如果未能解决你的问题，请参考以下文章
使用 CSS3 悬停效果，如何将文本向左移动 5 个像素并向后移动？
如何让带有 z-index 的 div 在悬停时覆盖另一个 div