更改懸停時的框顏色和文字顏色？

我有下面的代碼，這是一個風格的訂閱按鈕，我一直在試圖讓它懸停在整個框的背景顏色變化，以及文本'訂閱'的顏色也改變顏色以及。目前我下面的代碼改變了背景顏色，但只改變文本的顏色，如果我直接懸停在它上面。我希望能夠懸停在盒子上的任何位置，並且這兩個元素將顏色一起變化......任何一個能夠指出我要出錯的地方？更改懸停時的框顏色和文字顏色？

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

來源

2014-09-04 user2498890

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

來源

2014-09-04 09:25:28

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

能否請您試試這個？ >意味着它會影響框內的元素，所以這應該起作用。您可以嘗試+而不是>或者只是h3.subscribeHeader:hover a

來源

2014-09-04 09:23:09

Simplay的附加以下CSS

h3.subscribeHeader:hover a { 
    color: red;

}

這將調用子元素a，當鼠標懸停在H3

來源

2014-09-04 09:23:15 Feroza

您需要當你盤旋h3而不是a時改變文本顏色，所以基本上這應該是訣竅。

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

來源

2014-09-04 09:24:07 SCHTAILian

試試這個代碼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; 
}

來源

2014-09-04 09:26:18

同樣地，我在其他地方有另一個按鈕，在我的網站有相同的風格，但我在這個特定的按鈕上使用Perch，我將這個答案中的相同代碼應用於該按鈕，並且它沒有相同的結果，任何想法？以下是我的代碼 - – user2498890 2014-09-04 10:25:33

HTML：

– user2498890 2014-09-04 10:26:13

CSS：.buyHeader { \t padding-top：0.7em; \t padding-bottom：0。7em; \t寬度：35％; \t margin：0 auto; \t border：1px solid＃373737; } .buttonStyling { \t font-family：「futura-pt」，sans-serif; \t font-weight：400; \t font-style：normal; \t font-size：1.4em; \t顏色：＃373737; \t text-transform：uppercase; \t letter-spacing：0.1em; \t背景：無; \t border：none; } – user2498890 2014-09-04 10:26:43

如果你的子元素和圖像共享相同的類：

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

然後，你將有一個問題。確保根據需要這樣的子元素和圖像的背景是在兩個不同的類，然後風格：

在你的HTML

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

然後：

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

來源

2016-07-07 15:29:52 RileyManda

更改懸停時的框顏色和文字顏色？

回答

相關問題