jQuery 更改悬停属性 class

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

好的，如果我没理解错的话，您是在尝试选择一种颜色并更改悬停颜色。问题是您想要将 class definition/rule 更改为 .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;}

Answer 2

就这么简单吧。创建两个类并为每个类定义颜色。当你悬停和鼠标移开时，添加和删除类。

jQuery 更改悬停属性 class

jQuery change property of a hover class

html

css

jquery