当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Make button stay one color except when hovered over

问题描述:

How can I make a button that changes color on hover, then returns to its original color after it's been clicked?

The problem is that my button starts with a red gradient, then changes color when hovered over, then turns white after it's clicked. But I want it to return to red after it's been clicked, not white.

I thought I'd found the solution by adding focus. This way, after the button was clicked, it returned to its original color while it was in focus. But then hovering doesn't change the button's color until focus is removed from the button.

I haven't found a combination of pseudo classes or javascript to keep this button red unless it's hovered over.

Edit

Per a comment by @webeno, I removed the CSS and tried a new approach using this javascript, but the button continues to work in its default style. (In this example the colors are blue, then red when hovered over.)

<button class = "btn">Go</button>

<script>

.red {background-color: #f00;

}

.blue {background-color: #00f;

}

$(document).ready(function(){

$('.btn').mouseover(function(){

$(this).addClass('red');

}).mouseout(function(){

$(this).addClass('blue');

});

});

</script>

网友答案:

The best way to do that for changing color on mouse hover, you just use CSS.

.btn, .btn:focus, .btn:active {background-color: #00f;}

.btn:hover {background-color: #f00;}
网友答案:

You added your CSS definitions inside the script tag, which obviously is incorrect. You should either have it in the head section under the style tag, or in a separate .css file and refer to it in the head.

So...

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

...or...

<head>
    <style>
        /* Your CSS rules come here */
    </style>
</head>

Once you do that, your code at the bottom of your question should work just fine (provided you link to jQuery properly also, just like you'd to your stylesheet, demonstrated above).

Here it is in full:

<head>       
  <style>     
    .red {background-color: #f00;}     
    .blue {background-color: #00f;} 
  </style>
  <script>
    $(document).ready(function(){
      $('.btn').mouseover(function(){
        $(this).addClass('red');
      }).mouseout(function(){
        $(this).addClass('blue');
      });
    });
  </script> 
</head>
<body>
  <button class = "btn">Go</button>
</body>

Here is a fiddle demo: https://jsfiddle.net/6wbnvy7g/

One more thing though: mind you that you'd have to take care of removing the class each time an event is firing, otherwise you'll end up with both classes applied onto the element at the next time you're trying to hover over the button. So I'd change your jQuery code to one of the following:

$(document).ready(function(){
   $('.btn').mouseover(function(){
      $(this).removeClass('blue');
      $(this).addClass('red');
   }).mouseout(function(){
      $(this).removeClass('red');
      $(this).addClass('blue');
   });
});

Or even simpler, using the .hover function of jQuery:

$(document).ready(function(){
   $('.btn').hover(function(){
      $(this).removeClass('blue');
      $(this).addClass('red');
   }, function(){
      $(this).removeClass('red');
      $(this).addClass('blue');
   });
});

Here is an updated fiddle for that version: https://jsfiddle.net/6wbnvy7g/2/

网友答案:

The solution that works for my code is to follow zatee29's answer of placing this in the css:

.btn, .btn:focus, .btn:active {background-color: #00f;}
.btn:hover {background-color: #f00;}

with of course the button in the html:

<button class = "btn">Go</button>

The result works exactly as desired. The button starts blue, changes to red when hovered over, then returns to blue.

Note that webeno's second solution provides the same functionality in JSFiddle, though I couldn't figure out why it wouldn't work in my existing program.

分享给朋友:
您可能感兴趣的文章:
随机阅读: