Question

这个论坛很棒，已经节省了很多时间，
这是一个相对简单的问题，但我整天都在崩溃，无法找到解决方案。

它本质上是一个看起来像“按钮”的div，其大小，背景和边框定义我试图让链接和div的边框/背景在悬停在它上面时点亮，但无济于事。
我只能改变其中一个，无论是链接还是“按钮”

所以html：

<div align="middle" class="main_button1"><a href="/about/">Learn more</a></div>

并且div风格是：

.main_button1 {
    margin: auto;
    line-height: 2;
    width: 180px;
    border: 3px solid #98a2a7;
    padding: 10px;
    border-radius: 22px;
    background: white;
}

.main_button1 a {
    color: #98a2a7;
}

.main_button1 a:visited { 
    color: #98a2a7; 
}

但每当我尝试定义悬停效果时：
.main_button1:hover不会影响链接和
.main_button1 a:hover不会影响div，只影响链接

这是我徒劳的尝试，只改变div颜色而不是链接

.main_button1:hover { 
    border: 3px solid #98a2a7;
    padding: 10px;
    border-radius: 22px;
    background: #98a2a7;

    a { color: red; }
}

任何建议请哦，智者（和智者）？提前致谢！

Answer 1

您在悬停规则中拥有锚标记样式。把它放在一个像这样的新规则之外。

＆＃13;

  .main_button1 {
margin: auto;
line-height: 2;
width: 180px;
border: 3px solid #98a2a7;
padding: 10px;
border-radius: 22px;
background: white;
}

.main_button1 a{
color: #98a2a7;
}

.main_button1 a:visited{ 
color: #98a2a7; }

.main_button1:hover { 
border: 3px solid #98a2a7;
padding: 10px;
border-radius: 22px;
background: #98a2a7;

}

.main_button1:hover  a{color: red;}

＆＃13;

<div align="middle" class="main_button1"><a HREF="/about/">Learn more</a></div>

＆＃13;

Answer 2

小提琴链接：https://jsfiddle.net/ash06229/qaouthjf/

.main_button1 {
  margin: auto;
  line-height: 2;
  width: 180px;
  border: 3px solid #98a2a7;
  padding: 10px;
  border-radius: 22px;
  background: white;
}

.main_button1 a {
  color: #98a2a7;
}

.main_button1 a:visited{ 
  color: #98a2a7;
}

.main_button1:hover { 
  border: 3px solid #98a2a7;
  padding: 10px;
  border-radius: 22px;
  background: #98a2a7;
}

.main_button1:hover a { 
  color: red;
}

<div align="middle" class="main_button1"><A HREF="/about/">Learn more</A></div>

Answer 3

在我看来，就像你在SCSS编码一样。也许你感到困惑，无论如何，我只是简单地将SCSS翻译成普通的CSS： https://codepen.io/anon/pen/OgNKPg

.main_button1 {
  margin: auto;
  line-height: 2;
  width: 180px;
  border: 3px solid #98a2a7;
  padding: 10px;
  border-radius: 22px;
  background: white;
}

.main_button1 a {
  color: #98a2a7;
}

.main_button1 a:visited {
  color: #98a2a7;
}
.main_button1:hover {
  border: 3px solid #98a2a7;
  padding: 10px;
  border-radius: 22px;
  background: #98a2a7;
}
.main_button1:hover a {
  color: red;
}

<div align="middle" class="main_button1"><A HREF="/about/">Learn more</A></div>

但是，更好的方法是将元素本身设为按钮： https://codepen.io/anon/pen/RgaXPG

.main_button1 {
  margin: auto;
  line-height: 2;
  width: 180px;
  border: 3px solid #98a2a7;
  padding: 10px;
  border-radius: 22px;
  background: white;
  display: inline-block;
  text-align: center;
  display: block;
}

.main_button1 {
  color: #98a2a7;
}

.main_button1:visited {
  color: #98a2a7;
}
.main_button1:hover {
  border: 3px solid #98a2a7;
  padding: 10px;
  border-radius: 22px;
  background: #98a2a7;
}
.main_button1:hover  {
  color: red;
}

<A HREF="/about/" class="main_button1">Learn more</A>

玩得开心！

Answer 4

您需要同时将CSS应用于两者

.main_button1:hover, .main_button1 a:hover {border: 3px solid #98a2a7; padding:10px; border-radius: 22px; background: #98a2a7;}

CSS同时悬停div和链接

4 个答案: