Question

我是jQuery的新手，我正在尝试使用li类在ul内选择某个.hover()，并使其成为mouseOver将我选择的li更改为随机的预定义颜色：

我有一些工作，主要是随机颜色，除了它不是mouseOver，我不知道如何将其应用于.hover()

这是我到目前为止所做的：

$(document).ready(function(){
  var color = ['#FF0000', '#0000FF', '#00FF00', '#FFFF00', '#FF00FF', "#00FFFF", 
               "#C0C0C0"];
  var random_color = color[Math.floor(Math.random() * color.length)];
  $('ul li a').css('color', random_color);
});

Answer 1

首先，您需要存储当前颜色，以便在它离开时重置它。然后你可以使用jquery悬停函数

$(document).ready(function(){
   var color = ['#FF0000', '#0000FF', '#00FF00', '#FFFF00', '#FF00FF', "#00FFFF", 
               "#C0C0C0"];
   var random_color = color[Math.floor(Math.random() * color.length)];

   /* create variable with current color */
   var orig_color = $('ul li a').css('color'); 

   $('ul li a').hover(
      function(){ 
         /* function executes on mouse enter */
         $(this).css('color', random_color);
     }, function() {
         /* function executes on mouse leave */
         $(this).css('color', orig_color);

     });
});

Answer 2

这是一种做法。我在小提琴上添加了几条评论。 jsfiddle

function generate_random_color() {
var color = ['#FF0000', '#0000FF', '#00FF00', '#FFFF00', '#FF00FF', "#00FFFF", "#C0C0C0"];
  var random_color = color[Math.floor(Math.random() * color.length)];
   return random_color;

}
$(document).ready(function(){

    $('ul li').hover(function(){
        /* on mouse over it will change to a random background */
        $(this).css('background', generate_random_color);
    }, function(){
        /* on mouse leave it will change to a white background */
        $(this).css('background', '#fff'); 
    });
});

在<li>上使用.hover更改颜色，并在<ul>中定位</li> <li> </ul> </li>

2 个答案: