0

I made a site with lots of ghostbuttons that change color when the user hovers his or her mouse over them. The buttons are arranged by color like a rainbow and I want them to stay active/colored even when the mouse stops hovering over it so that when the user hovers over the all the buttons, all the buttons will be colored at the same time.

The buttons are all placed within bootstrap columns.

I have no experience with JavaScript so pure CSS would be ideal for me. But if JavaScript is the best way to go with this please let me know exactly how to implant it in HTML and CSS.

Please don't mind any mistakes in the spelling, I'm dutch and dyslectic :P

Thanks in advance!

Jesse
  • 25
  • 8

1 Answers1

0

Place this at the bottom of your code just before the </body> tag.

<script>
   $(".btn").mouseout(function() {
        $(this).css("background-color","pink");               
    });
</script>

You can change the (".btn") bit to any class on the page, so if you only wanted it to change btn-primary classes you'd have (".btn-primary") etc.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
ERushforth
  • 186
  • 2
  • 6
  • 17
  • Thanks it works! but how am I supposed to give all the buttons the right property's? like I need them to be transparent with a colored border and colored text in them. is this the way to do that? And can I use HEX colors in your code? $(".btn-blue").mouseout(function() { $(this).css("background-color","none" "border-color","blue" "color", "blue"); }); – Jesse Jan 13 '16 at 15:10
  • This is the default bootstrap button CSS: .btn-default { color: #333; background-color: #fff; border-color: #ccc; } You could create one called btn-red1 (in your own css file) and change the properties so it was one shade of red, then create another class called btn-red2 with a lighter/darker shade, and keep doing that until you've got the rainbow. – ERushforth Jan 13 '16 at 15:19
  • Yes I know, I didn't use that button but I understand and it worked with my button. The colored border is also working now. The only thing I can't do is set a second property. How can I set both the border color and the text color? Like I said the border is working like this but the text is still white. Do you know what my mistake is? – Jesse Jan 13 '16 at 15:24
  • Instead of a new set of brackets you just keep adding things on separating them with commas, so you'd use: $(".ghost-button-semi-transparent-pink").mouseout(function() { $(this).css("border-color", "#FF0040", "color", "#FF0040"); }); – ERushforth Jan 13 '16 at 15:30
  • Many thanks for the reply's! But the text color still isn't staying pink. when I stop hovering the border stays colored but the text goes back to white. – Jesse Jan 13 '16 at 15:34
  • Somehow only the first property I use stays when I stop hovering. If I put the text first it works but the border goes back to white. – Jesse Jan 13 '16 at 15:41
  • My apologies, I messed up the colons somewhere. Try this: $(".ghost-button-semi-transparent-pink").mouseout(function() { $(this).css({ "border-color": "#FF0040", "color" : "#FF0040" }); }); – ERushforth Jan 13 '16 at 15:45
  • I'm glad I could help! Could you mark this as 'answered' so it can help others? Thanks. – ERushforth Jan 13 '16 at 15:55
  • I'm sorry to bother you again and make things more complicated, but I was wondering if it is possible to make one of the buttons a reset button so all the colored buttons go back to white without the page refreshing. – Jesse Jan 14 '16 at 07:14
  • Inside the – ERushforth Jan 14 '16 at 09:08
  • Thank you! All the colored buttons have a different id like: .ghost-button-semi-transparent-red or .ghost-button-semi-transparent-blue. So I should probably add another class named .ghost-button – Jesse Jan 14 '16 at 09:29