Topic: CSS Hover not working | Themeco Community

Author

Posts
September 23, 2015 at 5:59 am #399751
Tristan A
Participant
Hi there,

I have a link in my topbar which opens up a lightbox, but which is styled as a button with the following CSS:
```
.topbar-btn {
background: red;
color:white !important;
padding: 5px 5px 5px 5px;
margin: 0px 5px 0px 2px;
border-radius: 0.225em;
}

.topbar-btn:hover {
background: green;
}
```
On a page, I am now adding a similar link, also to be styled as a button. The link is:
<a href="#mailchimp-form" class="lightbox-selector x-btn Listbtn" data-type="inline">Learn more[lightbox selector=".lightbox-selector"]</a>

and the styling is:
```
.topbar-btn {
background: red;
color:white !important;
padding: 5px 5px 5px 5px;
margin: 0px 5px 0px 2px;
 /*
 box-shadow: 0 0.05em 0 0 #ccc,0 1px 2px 2px rgba(255,255,255,0.75);
 text-shadow: 0 0.075em 0.015em rgba(0,0,0,0.5);
*/
border-radius: 0.225em;
}

.topbar-btn:hover {
background: green;
}
```
Everything works fine… apart from the :hover function. Which I find odd, because it is the exact same CSS that works perfectly for the Topbar-btn.

Changing it to:
```
.topbar-btn:hover {
background: green! Important!;
}
```
doesn’t make it work either.

Any thoughts?

Thanks!
September 23, 2015 at 5:59 am #399752

Tristan A
Participant

This reply has been marked as private.

September 23, 2015 at 6:07 am #399764

Tristan A
Participant

Sorry, In the private post I said button, but it is the link, styled as a button! The one that reads “Learn more”

September 23, 2015 at 6:09 am #399766
Thai
Moderator
Hi There,

Please try following CSS instead:
```
a.lightbox-selector.x-btn.Listbtn:hover {
    background-color: green !important;
}
```
Hope it helps!
September 23, 2015 at 6:14 am #399772
Tristan A
Participant
While waiting for your answer, I was fiddling arround and this is exactly what I tried! (without the !important)
```
a.lightbox-selector.x-btn.Listbtn:hover{background-color: green
}
```
And it works!

THanks again!
September 23, 2015 at 6:21 am #399780

Thai
Moderator

Glad you’ve sorted it out.

If you need anything else, please let us know 🙂
Author

Posts

<script> jQuery(function($){ $("#no-reply-399751 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>