Question

我可以使用选择器更改类选择器 - 背景颜色但是我需要更改类选择器 - 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');
   });
});

＆＃13;

$(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');
   });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

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

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

并定义班级hover

中的picker-a-hover规则

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

使用jquery colorpicker更改悬停效果？

3 个答案: