05_jQuery_子元素过滤

HTML代码：

<div>
        <span>s1</span>
        <span>s1</span>
        <span>s1</span>
    </div>
    <div>
        <span>s1</span>
        <span>s1</span>
        <span>s1</span>
    </div>
    <div>
        <span>s1</span>
        <span>s1</span>
        <span>s1</span>
    </div>

jQuery代码：

    //div span:first-child").css选择div中的第一个span标签，给他一个css样式，
    //text-decoration","underline"：添加到文本的修饰为：文本的下的一条线
    //hover鼠标悬浮在上面
        $(function(){
            $("div span:first-child").css("text-decoration","underline").hover(function(){
                $(this).addClass("sogreen");//addClass向被选中的元素添加一个或者多个类
            },function(){
                $(this).removeClass("sogreen");//removeClass向被选中的元素移除一个或者多个类
            });
        });

css代码：

.sogreen{
        background-color:#090;
    }

效果：当鼠标悬浮到每个div中的第一个span元素的时候该元素变成绿色，鼠标离开后回复原样

 

转载于:https://www.cnblogs.com/xiaojiujiu1999/p/7822075.html