Question

基于the discussion，我们知道允许在<div>代码中添加<a>，因为我们正在使用html5，但我想知道怎么能我们更改了此<div>中的样式。简而言之，我有一个像这样的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，下面提供了完整的代码。我把评论指出要填写的代码。

查看方形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解决方案（使用阻止＆＃39; ed锚或只是一个跨度），但我遇到的困境是我使用bootstrap，特别是，我希望头部是整个链接，那＆＃39;有点动机。例如，

<div class="panel panel-default">
  <div class="panel-heading">This to be an anchor</div>
  <div class="panel-body">Panel Content</div>
</div>

Answer 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

Answer 2

试试这个css：

a.fill_a {
  text-decoration: none;
}
a.fill_a:hover > div.fill_div {
  background-color: pink !important;
  color: #fff;
}

Fiddle demo here

我应该如何覆盖锚标记中div的悬停样式？

2 个答案: