Question

我是学习jQuery的初学者，问题是：

添加一个jQuery事件监听器，以便在鼠标光标悬停在第一段时将其设置为棕色，粗体和带下划线。

我正在尝试这个：

$(document).ready(function() {
    $("p").first().hover(
        function() {
            (this).css('color','brown');
            (this).css('font-weight','bold');
            (this).css('text-decoration','underline');
        },
        function() {
            (this).css('color','black');
            (this).css('font-weight','normal');
            (this).css('text-decoration','none');
        }
    );
});

但它不起作用。所有p标签都包含在不同的div标签中，这有什么不同？通过“第一段”，我认为这意味着页面上的第一段。

Answer 1

您的代码是missin $包装器。

(this).css css是jquery对象的一种方法。但是你试图通过说(this).css来调用DOM元素。

.first()的简写为:first。您也可以将其称为$("p:first").hover(

Demo

$(document).ready(function() {

    $("p").first().hover(

        function() {
            var elem = $(this);
            elem .css('color','brown');
            elem .css('font-weight','bold');
            elem .css('text-decoration','underline');
        },
        function() {
           var elem = $(this);
            elem .css('color','black');
            elem.css('font-weight','normal');
            elem.css('text-decoration','none');
        }
    );
});

只是为了扩展和展示你如何选择那个特定div的第一段的问题。您可以使用选择器链接/过滤来确保只影响预期的段落。请参阅Example以及下面的代码，其中样式仅针对具有A类的div的段落。

$(document).ready(function () {

    $("div.A p:first").hover(

    function() {
            var elem = $(this);
            elem .css('color','brown');
            elem .css('font-weight','bold');
            elem .css('text-decoration','underline');
        },
        function() {
           var elem = $(this);
            elem .css('color','black');
            elem.css('font-weight','normal');
            elem.css('text-decoration','none');
        }
});

Answer 2

尝试将所有（此）变形为$（this）

即：

$(document).ready(function() {
    $("p").first().hover(
        function() {
            $(this).css('color','brown');
            $(this).css('font-weight','bold');
            $(this).css('text-decoration','underline');
        },
        function() {
            $(this).css('color','black');
            $(this).css('font-weight','normal');
            $(this).css('text-decoration','none');
        }
    );
});

虽然我认为这不是问题

Answer 3

另请尝试$('body p:first').hover(function() { .... })

$(document).ready(function() {
    $('p').first().hover(
        function() {
            $(this).css({'color':'brown', 'font-weight':'bold','text-decoration':'underline'} );

        },
        function() {
            $(this).css({'color':'black', 'font-weight':'normal','text-decoration':'none'} );

        }
    );
});

jQuery - 将CSS应用于第一段

3 个答案: