jQuery 更改悬停类的属性

Question

如何更改悬停背景颜色？

   <style>
      .myhoverclass {background:#FFF;}
   </style>

我用这段代码切换:

   $('.box a').hover(
        function(){ $(this).toggleClass('myhoverclass') }
   )

但是当我用 ColorPicker 改变 .myhoverclass 时...

  $('#li-a-bgcolor').ColorPicker({
    onChange: function (hsb, hex, rgb) {
        $('#li-a-bgcolor').css('backgroundColor', '#' + hex);
        $('.myhoverclass').css('background-color', '#' + hex);
    }
  });

...颜色仍然是白色。哪里错了？

谢谢。

Answer 1

好的，如果我没理解错的话，您是在尝试选择一种颜色并更改悬停颜色。问题是您想要更改 .myhoverclass {background:#FFF;} 的类定义/规则，这是一件非常困难的事情。

相反，我建议这样的解决方案:http://jsfiddle.net/k6kp1e5n/

HTML

<div id="colorPicker">
     <div style="background-color: #0000FF"></div>
     <input type="text" value="#0000FF">
</div>
<br><br>
<div class="box">
    <a href="#">Hover me</a>
</div>

JS

$('#colorPicker').ColorPicker({
    color: '#0000FF',
    onChange: function(hsb, hex, rgb) {
        $('#colorPicker div').css('backgroundColor', '#' + hex);
        $('#colorPicker input').val('#' + hex);
    }
});

// Handles "hovering"
$('.box a').on('mouseenter', function (e) {
    $(this).css('background-color', $('#colorPicker input').val());
});
$('.box a').on('mouseout', function(e){
   $(this).css('background-color','#FFF');
});

CSS

.box {background:#FFF;}