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;}

Answer 2

让它变得如此简单。创建两个类并为每个类定义颜色。当你悬停和mouseout时，添加和删除类。

jQuery更改悬停类的属性

2 个答案: