Question

＆＃13;

a {
  text-decoration: none;
}
.social {
  padding-left: 670px;
  /*margin-left: 670px;*/
  margin-top: -140px;
}
.blog_roll_links {
  margin-left: 58px;
  width: 210px;
  height: 40px;
  line-height: 40px;
}
.blog_roll_links:hover {
  background-color: #C74451;
  color: white !important;
  text-shadow: 1px 1px 1px black;
}
.social_links {
  padding-left: 8px;
  margin-left: 40px;
  width: 140px;
  height: 30px;
  line-height: 30px;
}

＆＃13;

<div class="bolgnsocial">
  <div class="blog">
    <h3 class="featArt">blogroll</h3>
    <div class="blog_roll_links">
      <a href="#" class="sociala" target="_blank">HTML5 Doctor</a>
    </div>
    <div class="blog_roll_links" style="margin-left:17em; margin-top: -40px;">
      <a href="#" class="sociala" target="_blank">HTML5 Spec (working draft)</a>
    </div>
    <div class="blog_roll_links">
      <a href="#" class="sociala" target="_blank">Super Magazine</a>
    </div>
  </div>

  <div class="social">
    <h3 class="featArt">social</h3>
    <div class="social_links blog_roll_links">
      <a href="#" target="_blank"> facebook</a>
    </div>
    <hr align="right" style="border-style: outset; border-color: white; margin-left: 45px; width: 140px;" />

    <div class="social_links blog_roll_links">
      <a href="#" target="_blank"> twitter</a>
    </div>
  </div>
</div>

＆＃13;

我有一小段代码和两个问题：

＆＃34; facebook＆＃34;和＆＃34; twitter＆＃34;拥有相同类别的＆＃34; blog_roll_links＆＃34;但是，最终结果是不同的。它应该在链接上悬停时改变div颜色，就像博客中的链接一样。我只是想不清楚为什么＆＃34;博客＆＃34;和＆＃34;社交＆＃34;拥有相同的课程，但不会产生同样的效果。
我希望在悬停时将文字颜色更改为白色，我的CSS中有代码，为什么它不起作用？

Answer 1

您好我强烈建议您浏览浏览器（Chrome推荐）开发工具。

如果您检查元素，您将在当前样式中看到，锚点嵌套在div中并且锚点没有相同的宽度和高度。

取决于您要添加的类：hover，css会做出相应的反应。

字体的颜色也属于锚。

我的建议是你将样式div包装在锚点内，这样整个div就成了一个链接;）

希望这有助于你

CSS悬停在锚点上时，更改

1 个答案: