用jquery colorpicker改变悬停效果？

Question

我可以使用选择器更改类选择器-a 背景颜色，但我需要更改类选择器-a 的悬停样式？我怎么能用这个代码做到这一点？

附言。对不起我的英语。

$(document).ready(function() {
  var colors = ['feff35', 'fff600', 'ffe800', 'd0eb2c', 'aed14f', '40aa48'];
  $picker = $('.picker'), $stagepicker = $('.picker-a'),
    $.each(colors, function(i, color) {
      $picker.append('<div class="color-square" style="background:#' + color + ';"></div>');
    });
  $picker.on('click', '.color-square', function(event) {
    $stagepicker.css('background', $(this).css('backgroundColor'));
  });
});

.color-square {
  display: inline-block;
  width: 28.75px;
  height: 28.75px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="picker"></div>

<div>

  <a href="#" class="picker-a">lorem ipsum</a>
  <a href="#" class="picker-a">lorem ipsum</a>
  <a href="#" class="picker-a">lorem ipsum</a>

</div>

Answer 1

使用.mouseenter() 事件而不是点击。

绑定一个事件处理程序以在鼠标进入元素时触发，或在元素上触发该处理程序。

还有.mouseleave()

绑定一个事件处理程序以在鼠标离开元素时触发，或在元素上触发该处理程序。

代码

$picker.on('mouseenter', '.color-square', function(event) {
    //Set background color on enter
    $stagepicker.css('background', $(this).css('backgroundColor'));
}).on('mouseleave', '.color-square', function(event) {
    //Clear color on exit
    $stagepicker.css('background', 'none');
});

$(document).ready(function() {
  var colors = ['feff35', 'fff600', 'ffe800', 'd0eb2c', 'aed14f', '40aa48'];
  var $picker = $('.picker');
  var $stagepicker = $('.picker-a');
  $.each(colors, function(i, color) {
    $picker.append('<div class="color-square" style="background:#' + color + ';"></div>');
  });
  $picker.on('mouseenter', '.color-square', function(event) {
    $stagepicker.css('background', $(this).css('backgroundColor'));
  }).on('mouseleave', '.color-square', function(event) {
    $stagepicker.css('background', 'none');
  });
});

.color-square {
  display: inline-block;
  width: 28.75px;
  height: 28.75px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="picker"></div>

<div>

  <a href="#" class="picker-a">lorem ipsum</a>
  <a href="#" class="picker-a">lorem ipsum</a>
  <a href="#" class="picker-a">lorem ipsum</a>

</div>

Answer 2

使用mouseover 和mouseout

$picker.on('mouseover', '.color-square', function(event) {
    $stagepicker.css('background', $(this).css('backgroundColor'));
  }).on('mouseout', '.color-square', function(event){
     $stagepicker.css('background', 'transparent');
   });
});

$(document).ready(function() {
  var colors = ['feff35', 'fff600', 'ffe800', 'd0eb2c', 'aed14f', '40aa48'];
  $picker = $('.picker'), $stagepicker = $('.picker-a'),
    $.each(colors, function(i, color) {
      $picker.append('<div class="color-square" style="background:#' + color + ';"></div>');
    });
  $picker.on('mouseover', '.color-square', function(event) {
    $stagepicker.css('background', $(this).css('backgroundColor'));
  }).on('mouseout', '.color-square', function(event){
     $stagepicker.css('background', 'transparent');
   });
});

.color-square {
  display: inline-block;
  width: 28.75px;
  height: 28.75px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="picker"></div>

<div>

  <a href="#" class="picker-a">lorem ipsum</a>
  <a href="#" class="picker-a">lorem ipsum</a>
  <a href="#" class="picker-a">lorem ipsum</a>

</div>

Answer 3

在悬停时添加一个类并在回调时删除。

$stagepicker = $('.picker-a');

$stagepicker.hover( function(){ $(this).addClass("picker-a-hover"); }, 

                    function(){ $(this).removeClass("picker-a-hover"); });

并在picker-a-hover类中定义hover规则

.picker-a-hover
{
... CSS RULES
}