0

我是学习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 标签中，这有什么不同吗？我认为“第一段”是指页面上的第一段。

4

3 回答 3

4

你的代码是missin $wrapper。

(this).csscss 是 jquery 对象的一种方法。但是在那里你试图通过说在 DOM 元素上调用它(this).css。

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

演示

$(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 的第一段的问题。您可以使用选择器链接/过滤来确保只影响预期的段落。请参阅下面的示例和代码，其中样式仅针对具有类 A 的 div 的 para。

$(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');
        }
});
于 2013-05-06T03:08:02.767 回答
1

尝试将所有 (this) 扭曲为 $(this)

IE：

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

虽然我不认为这是问题

于 2013-05-06T03:09:03.747 回答
0

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

        }
    );
});
于 2013-05-06T03:07:30.147 回答