jquery - jQuery随机颜色 - 悬停时设置不起作用

Question

我有这段代码，我正在生成一个随机颜色并将其转换为 HEX，然后我想将其设置为backgroundColorspan.ribbon a:hover类：

<script type="text/javascript">
$(function() {

    var randomColor = Math.floor(Math.random()*16777215).toString(16);
    alert(randomColor);
    $(".ribbon a:hover span").css({

        backgroundColor: '#' + randomColor

    });



});
</script>

这是我的CSS：

.ribbon a:hover span {
    background: /*<?php printf( "#%06X\n", mt_rand( 0, 0xFFFFFF )); ?>*/ #FFF;
    margin-top:0;
}

它甚至不会提醒我的 randomColor 变量...我已将此脚本放在</body>标签之前...

Answer 1

jQueryUI 不包括 jQuery ：您仍然需要加载它（之前）。

所以你应该更换

<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript"> google.load("jqueryui", "1.5.2"); </script>

和

<script src="http://www.google.com/jsapi"></script> <!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jquery", "1.5.2");
google.load("jqueryui", "1.5.2");
</script>

Answer 2

首先，您必须加载 jQuery - 您提供的代码仅加载 jQuery UI。

<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
    google.load("jquery", "1.5.2");
    google.load("jqueryui", "1.5.2");
</script>

其次，您不能:hover像这样将函数绑定到选择器，您需要使用 jQuery 函数.hover：

<script type="text/javascript">
$(function() {


    $(".ribbon a").hover(function() {
        // change to random color on mouseover
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        alert(randomColor);
        $(this).find('span').css({
            backgroundColor: '#' + randomColor
        });
    }, function() {
        // change back to original color on mouseout
        $(this).find('span').css({
            backgroundColor: '#FFF'
        });
    });
});
</script>

Answer 3

要么你没有导入 jQuery，要么你的代码中的其他地方有 JS 错误，导致你的脚本作为一个整体中断。首先，检查您的控制台是否有任何错误。如果这没有显示任何内容，请尝试将您的脚本更改为：

<script type="text/javascript">
    $(function(){
        alert('jQuery is alive!');
    });
</script>