悬停时更改框颜色和文本颜色？答案

【问题标题】：Changing a box colour and text colour on hover?悬停时更改框颜色和文本颜色？
【发布时间】：2023-04-01 08:55:02
【问题描述】：

我有以下代码用于样式化的订阅按钮，我一直在尝试获取它，以便在悬停时整个框的背景颜色会发生变化，并且文本“订阅”的颜色也会更改为好吧。目前，我下面的代码会更改背景颜色，但如果我直接将鼠标悬停在文本上，只会更改文本的颜色。我希望能够将鼠标悬停在框上的任何位置，并且两个元素一起改变颜色......任何人都能够指出我哪里出错了吗？

HTML：

<h3 class="subscribeHeader">
   <a href="http://link.com/" target="_blank">Subscribe</a>
</h3>

CSS：

h3.subscribeHeader {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
}

h3.subscribeHeader a:hover {
  color: #fafaf9;
}

h3.subscribeHeader:hover {
  background-color: #373737;
}

【问题讨论】：

标签： html css hover

【解决方案1】：

h3.subscribeHeader:hover > a {
  background-color: #373737;
  color: #fafaf9;
}

你能试试这个吗？ > 意味着它将影响该框内的元素，因此应该可以。你可以试试+ 而不是> 或者干脆h3.subscribeHeader:hover a

【讨论】：

【解决方案2】：

simplay 添加以下css

h3.subscribeHeader:hover a {
  color: red;

}

当鼠标悬停在 h3 上时，这将调用子元素 'a'

【讨论】：

【解决方案3】：

当您将鼠标悬停在 h3 而不是 a 时，您需要更改文本颜色，所以基本上这应该可以解决问题。

h3.subscribeHeader:hover {
  background-color: #373737;
  color: #fafaf9;
}

【讨论】：

【解决方案4】：

CSS 可以被覆盖。

js fiddle

h3.subscribeHeader {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
}

h3.subscribeHeader a:hover {
  color: #fafaf9;
}

h3.subscribeHeader:hover {
  background-color: #373737;
}

h3.subscribeHeader:hover a{
  color: #fafaf9;
}

【讨论】：

【解决方案5】：

试试这个代码DEMO

<a class='subscribeHeader' href="http://link.com/" target="_blank">Subscribe</a>


a {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
  display:block;
}


a.subscribeHeader:hover {
  background-color: #373737;
  color: #ccc;
}

【讨论】：

类似地，我网站的其他地方有另一个按钮，它具有相同的样式，但我在这个特定按钮上使用了 Perch，并且我将来自这个答案的相同代码应用于该按钮，但它不是t有相同的结果，有什么想法吗？下面是我的代码 -
HTML:
CSS: .buyHeader { padding-top: 0.7em;底部填充：0.7em；宽度：35%；边距：0 自动；边框：1px 实心 #373737; } .buttonStyling { 字体系列：“futura-pt”，无衬线；字体粗细：400；字体样式：正常；字体大小：1.4em；颜色：#373737；文本转换：大写；字母间距：0.1em；背景：无；边框：无； }

【解决方案6】：

如果您的子元素和图像共享同一个类：

    <div class="myclass"
<div class="myimageclass"</>
<div class="childelements"</>
</div>

那你就有问题了。确保子元素和您的图像背景在两个不同的类中，然后根据需要设置如下样式：

      .img-back {
       background: #394557 url(images/space.jpg) ;
        background: #394557 url(images/space.jpg),linear-gradient(#eb01a5, #d13531);/*login Page Background */
        -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
       opacity: 0.25;

.mychildelemts {
    width: 375px;
    margin: 0 auto
}

然后在您的 html 中：

<div class="main-container">
    <div class="img-back"
    <div class="myimageclass"<div/>
    </div>
<div class="childelements"
<p> my children</p>
<div/>
</div>

【讨论】：