Question

我有以下代码用于样式订阅按钮，我一直试图让它在悬停时整个框的背景颜色发生变化以及文本的颜色＆＃39;订阅＆＃39;改变颜色。目前，我在下面的代码更改了背景颜色，但只有在我直接悬停在文本上时才会更改文本的颜色。我希望能够在盒子上的任何地方悬停，两个元素一起改变颜色......任何人都能指出我出错的地方？

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;
}

Answer 1

尝试此代码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;
}

Answer 2

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;
}

Answer 3

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

你可以试试这个吗？ >表示它会影响该框内的元素，因此这应该有效。您可以尝试使用+代替>，或只是h3.subscribeHeader:hover a

Answer 4

simplay添加以下css

h3.subscribeHeader:hover a {
  color: red;

}

这将调用子元素＆＃39; a＆＃39;当鼠标悬停在h3上时

Answer 5

当您悬停h3而不是a时，您需要更改文字颜色，所以基本上应该这样做。

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

Answer 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>

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

6 个答案: